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;

}

徽标是图像1，标题添加是图像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%;
    }
}

Answer 2

clip()和overflow: hidden用于屏蔽您的内容。

min-width和/或 max-width 来管理每个div的宽度，当两者的总和对于容器的宽度来说太大时。

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

2 个答案: