html - 使用比 CSS 中的页面大的页面缩放图像

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 .