html - 在响应式网页设计中重叠时裁剪图像

Question

我正在创建一个包含图像的响应式网页设计....我想知道是否有任何方法可以在图像重叠时裁剪图像，即如果我在一行图像 1 和图像 2 中有两个图像图片 1 在左边，图片 2 在右边，我开始缩小浏览器的宽度，当图片 2 到达图片 1 时，图片 2 开始裁剪或隐藏或其他任何....我要怎么做？这是我正在尝试的代码:

#logo{
float:right;
margin:88px 0 0 70px;
position:absolute;
}
#header-add{
float:right;
margin:35px -10% 0 0;
cursor:pointer;

}

Logo是图片1，header-add是图片2

Answer 1

与其裁剪图像，我建议您简单地设置 CSS 以在浏览器宽度减小时适本地设置图像的宽度。这样你就不用担心裁剪了。

例如(值是任意的，但基于百分比，我发现它最适合响应式设计):

@media screen and (max-width: 768px) {
    #header-add {
        width: 40%;
    }
}
@media screen and (max-width: 480px) {
    #header-add {
        width: 25%;
    }
}

如果您不想通过 CSS 设置图像的宽度，您可以将每个图像包含在 div 中，并且您可以设置 overflow:hidden 在div上，然后在CSS中设置div的宽度(如前面提到的图像宽度示例)。

希望对您有所帮助!

添加:
在回答您关于从左侧裁剪的评论时，我建议您这样做。缺点是您必须在裁剪图像的 div 上添加明确的高度，但它应该适合您。

HTML:

<div id="crop_div">
<img src="foo.jpg" alt="bar" />
</div>

CSS:

#crop_div {
    float: right;
    height: 100px; /* Needed since contents use absolute position */
    overflow: hidden; /* To crop the img inside of it */
    position: relative; /* Set for img position below */
    width: 400px;
}
#crop_div img {
    position: absolute; /* To anchor it on the right */
    right: 0;
}
@media screen and (max-width: 768px) {
    #crop_div {
        width: 40%;
    }
}