Html 用'；它比CSS中的页面大

当页面/屏幕的宽度改变时，我想调整图像的大小

这段代码几乎满足了我的要求：

.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>

部分
{
位置：相对位置；
最小宽度：600px；
最大宽度：1200px；
高度：自动；
左边距：自动；
右边距：自动；
溢出：隐藏；
}
.形象
{
位置：相对位置；
显示：内联块；
垂直对齐：顶部；
宽度：100%；
高度：自动；
}

问题是，图像的宽度是2560px，而截面只有1200px。图像被水平挤压以适应，从而降低了高度。但是，当页面处于最大宽度（1200）时，我希望图像处于全高（400）。因此，我需要图像挂在边缘上，但仍然会自动调整大小

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

---

我试过

.image{margin right:-1360；}

但没有效果。

在css之后使用媒体查询。这将删除

100%

声明，并使图像保持自然大小

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

另外，从包含的div中删除

溢出：hidden

---

.

我不明白“我需要图像挂在边缘”。你能解释一下吗？图像的宽度是页面/div最大宽度的2倍，因此，对于在浏览器窗口中可见的图像部分，图像必须挂在窗口边缘。因此，你希望图像的左半部分根据div的大小显示和缩放该半部分？？然后设置图像动画以显示图像的右半部分？是。实际上，我发现了一个可行的方法，就是这样做：。图像{width:213.333%；}-但当然，这需要我手动计算%%，我还没有尝试过制作动画。。听起来很像我提出的解决方案（顺便说一句，我使用了：悬停而不是动画）：当窗口缩小到1200px以下时，所有这一切似乎都是将图像向下捕捉到合适的宽度，这不是您想要的吗？您想要什么不同的行为？示例：-图像挂起，但仍随页面调整大小