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

海天

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

我有这样的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}

调整Windows大小时,我要删除(.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做到这一点。谢谢你的帮助。

斯图尔特·克肖(Stuart Kershaw)

我倾向于同意@Phorden的观点,即媒体查询是一种不错的选择。

但是,如果您需要使用JS / jQuery,请执行以下操作:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章