1

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

我有这样的 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 做到这一点。谢谢你的帮助。

4

4 回答 4

3

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

但是，如果您需要使用 JS / jQuery 进行操作：

$(window).resize(function() {
    $('.box img').css({'top': 'auto', 'left': 'auto', 'min-width': '100%'});
});
于 2013-10-25T15:10:09.417 回答
3

我不知道 jQuery 或 Javascript 解决方案，但如果您想要纯 CSS 解决方案，CSS 媒体查询可能就是您想要的。它是响应式网页设计的基本概念。更多关于 CSS 媒体查询的信息：https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

于 2013-10-25T15:05:59.687 回答
1

将 max-width:100% 和 height:auto 添加到您的图像中，以使它们根据其父级按比例调整大小：

.box img{
       position:absolute; 
       top:-10px; 
       left:-10px

       max-width: 100%; /* fits width of parent */
       height: auto;  /* resize height based on max-width, making it proportional *?
 }

.

于 2013-10-25T15:17:11.433 回答
1

我认为 Scott Jehl 的这个脚本对你来说可能很有趣，尽管图像只在特定断点处改变尺寸。

图片填充

它非常有用，因为您可以为各种分辨率定义不同的图片源。

结合此脚本所需的标记如下所示：

<span data-picture data-alt="Image description">
    <span data-src="small.jpg"></span>
    <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
    <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
    <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>

    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="Image description">
    </noscript>
</span>
于 2013-10-25T15:24:55.600 回答