在 div 元素中显示图像的一部分答案

【问题标题】：Displaying a portion of a image in a div element在 div 元素中显示图像的一部分
【发布时间】：2017-05-06 17:49:08
【问题描述】：

当我有一个例如 300*300px 的 div 和一个 1280*560px 的图像时。我可以在我的 div 中显示图像的特定部分，同时它只使用 html/css 时保持响应吗？

div 总是占据页面宽度的 33%

我的代码如下所示：

html

<div class="crop">
    <img src="path/to/img">
</div>

css

position: relative;
overflow: hidden;
min-height: 300px;

【问题讨论】：

这里是参考链接stackoverflow.com/questions/57725/…。您的问题与此类似。

标签： html css image

【解决方案1】：

是的，其实很简单：

.image {
display: block;
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
}

.image img {
position: relative;
left: -100px;
top: -100px;
}

<div class="image">
    <img src="http://img05.deviantart.net/c135/i/2011/134/7/0/bridge_by_kzonedd-d3gcetc.jpg" alt="photo of old wooden bridge" />
</div>

当然，负100px只是为了告诉你如何定位。玩转这些价值观，一切都会变得清晰。

HTH。祝你好运，玩得开心。

【讨论】：

另外，px 值只是为了保持简单，您可以随意缩放图像和 div。

【解决方案2】：

在这种情况下使用背景图像可能会对您有所帮助，您可以使用background-position 调整它的位置：

.crop{
  position: relative;
  overflow: hidden;
  min-height: 300px;
  width: 300px;
  background-image: url(https://cdn.pixabay.com/photo/2015/07/06/13/58/arlberg-pass-833326_960_720.jpg);
  background-size: contain;
}

<div class="crop">
</div>

【讨论】：

你的回答没有解释如何显示图像的一部分，它解释了如何显示整个图像，这不是我遇到的问题。
@Pizzalord，所以当人们试图帮助你时，你只是投反对票，而不是更好地解释你的问题？检查我更新的答案。
我不是反对你的人，我声明你在编辑没有解决或部分解决我的问题之前回答
@Pizzalord，好的。我只是想帮忙。希望您找到问题的答案。
不错的答案。 +1

【解决方案3】：

是的，你可以用 flex 做到这一点

这是代码，下面解释

div{
width:300px;
height:300px;
overflow:hidden;
position:relative;
left:50%;
transform:translateX(-50%);
display:flex;
justify-content:center;
align-items:center;
}
div img{
flex:0;
width:auto;
min-height:100%;}

<div>
  <img src ="http://www.cooperindustries.com/content/dam/public/safety/notification/products/Mass%20Notification%20Systems/Spotlight/MNS_WideArea_Spotlight3.jpg">
</div>

在 justify-content 上，您可以放置 flex-start、flex-end 和 center 以适应您要水平输入的部分

在 align-items 上，您可以将与 justify 内容相同的东西垂直调整。

这张图片是横向的，所以我将最小高度设置为 100%，宽度设置为自动，当你得到一张纵向图片时，你可以做另一边。如果图像是正方形的，宽度 100% 就可以了

【讨论】：