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

当页面/画面的宽度发生更改时，我想要调整图像大小。使用比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>

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

我不只是裁剪图像的原因是因为我想用css动画滚动它。我试过.image{ margin-right:-1360; }但它没有效果。

来源

2014-11-03 bitwise

我不明白“我需要图像挂在边缘”。你能解释一下吗？ – JakeParis 2014-11-03 21:30:09

图像的宽度是页面/ div的最大宽度的2倍，因此对于浏览器窗口中可见的图像部分为100％，图像必须悬挂在窗口的边缘。 – bitwise 2014-11-03 21:32:31

所以你想要显示图像的左半部分，并根据div的大小缩放那一半？然后动画图像显示图像的右半部分？ – RMo 2014-11-03 22:30:09

在您拥有的CSS后使用媒体查询。这将删除100%声明并让图像成为自然大小。

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

另外，从包含的div中拿走overflow:hidden。

See this fiddle for an example。

来源

2014-11-03 21:34:23 JakeParis

所有这些似乎当窗口缩小到1200像素以下时，做的是将图像捕捉到适合宽度的方向 – bitwise 2014-11-03 21:37:23

这不是你想要的吗？你想要什么不同的行为？ – JakeParis 2014-11-03 21:38:21

例如：http：//picpaste.com/example-ImqPP0m2.jpg - 图片挂起，但仍然调整页面大小 – bitwise 2014-11-03 21:46:06

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

回答

相关问题