Question

当页面/屏幕的宽度发生变化时，我想要调整图像大小。

这段代码几乎可以满足我的需求：

.section
{
    position:relative;
    min-width:600px;
    max-width:1200px;
    height:auto;

    margin-left:auto;
    margin-right:auto;
    overflow: hidden;
}

.image
{
    position:relative;
    display:inline-block;
    vertical-align:top;

    width:100%;
    height:auto;
}

<div class="section">
    <img src="long_img.jpg" class="image"/>
</div>

问题是，图像宽度为2560px，截面仅为1200px。图像被水平压扁以适应，从而缩小高度。但是，当页面处于最大宽度（1200）时，我希望图像处于全高（400）。所以我需要将图像悬挂在边缘上，但仍然会自动调整大小。

我之所以不裁剪图像是因为我想用css动画滚动它。

我已经尝试了.image{ margin-right:-1360; }，但它没有效果。

Answer 1

在css之后使用媒体查询。这将删除100%声明，让图片成为自然尺寸。

@media(min-width:1200px) {
    .section img {
        width: auto;
        display: block;
    }
}

此外，从包含div中删除overflow:hidden。

See this fiddle for an example

缩放图像，页面大于CSS中的页面

1 个答案: