Question

在响应式设计中，我希望能够使用CSS隐藏部分图像用于宽屏幕，但是整个图像都存在，以便我可以使用媒体查询更改图像比例，以显示小屏幕的整个图像。我已经用一个简单的页面设置了我想要的样本，但它不起作用 - 整个图像总是显示出来。示例页面为http://longinsurance.biz/temp.html;目标是显示图像的前82％。

任何人都可以建议我做错了什么或者如何让它发挥作用？

谢谢！

Answer 1

如果您想隐藏图像的某些部分，请执行以下操作。

图片容器CSS

.image-container {
width: 80%; /* Chosen width */
height: 80%; /* Chosen height */
overflow: hidden; /* Cuts off whatever goes beyond the container */
}

图片CSS

.image-container img {
width: 100%; /* Fits the given width of the image container */
height: auto; /* Reduces deterioration because the height isn't forced */
margin: -5px -5px -5px -5px; /* The minus cuts off(hides) parts of the image */
}

对于媒体查询：使用相同的CSS并根据需要调整尺寸。

注意：减号越高，它就越被切断。

用css隐藏部分图像

1 个答案: