javascript - 调整窗口大小时如何流动图像？

Question

如何在调整窗口大小时使图像流畅？

我有这样的 HTML 代码:

<div class="box">
 <img src="http://demo.smooththemes.com/magazon/wp-content/uploads/2013/01/984632486_9d8ff89b63_b-642x336.jpg" />
</div>

和 CSS:

.box {width:150px; height:60px; position:relative; overflow:hidden}
.box img{position:absolute; width:180px; height:80px; top:-10px; left:-10px}

调整窗口大小时，我想删除 (.box img) 的属性:top:-10px; left:-10px 和属性 more : min-width:100%, max-width:100%。这意味着我们有:

.box img{
position:absolute;
width:180px; height:80px; min-width:100%;  
top:(removed); left:(removed)}

如何使用 Javascript 或 Jquery 来实现。感谢您的帮助。

Answer 1

我倾向于同意@Phorden 的观点，即媒体查询是一个很好的途径。

但是，如果您需要使用 JS/jQuery 来完成:

$(window).resize(function() {
    $('.box img').css({'top': 'auto', 'left': 'auto', 'min-width': '100%'});
});