Question

试着重新解释我在这里要做的事情。 div / img示例似乎有点混乱。简而言之，我要做的是在图像周围创建一个包装器，它保持为正方形，但随着浏览器窗口的调整，响应性地扩展。方形内的图像也将调整方形包装（div）内的大小以填充空间。图像的宽度几乎相同，但高度会有所不同，我想要在顶部放置并隐藏底部，使其比方形包装更大。因为方形包装器会随窗口调整大小而无法将实际尺寸设置为此div，但是想要自动调整。

希望这有帮助。

所以这就是我想出来的。这似乎在很大程度上起作用。

var divWidth = $('.photo').width();
$('.photo').height(divWidth);

$(window).resize(function () {
    var divWidth = $('.photo').width();
    $('.photo').height(divWidth);
});

有人有任何建议吗？

---原始描述----

我希望创建一个包含图片的响应式网页。不幸的是，并非所有图像都具有相同的高宽比。所以考虑在图像周围创建一个包装器，它将高度设置为图像的当前宽度，其余部分将被隐藏。寻找最好最简单的方法吗？

这样做是为了创建一个2列的项目列表，这些项目随浏览器的宽度而扩展。但不幸的是，由于图像尺寸，一些项目比其他项目更高。而且我希望图像在方框宽度相等的宽度上以便整合。但我不想高度调整图像大小，只需填充100％宽度，并在底部溢出。

CSS：

.listing ul {
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
}

.listPeople li {
    list-style: none;
    float: left;
    position: relative;
    display: block;
    width: 48.93617020799999%;
    height: auto;
    background: #FFF;
    border: 1px solid #D0D5D8;
    padding: 12px;
    margin: 0 15px 15px 0;
}

    .listPeople li .user .photo {
        position: relative;
        display: block;
        background: #FFF;
        box-shadow: 0 1px 2px rgba(0,0,0,0.09);
        border: 1px solid #DDD;
        padding: 8px;
        margin: 0;
    }

.listing li .user .photo img {
    width: 100%;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
    padding: 0;
    margin: 0;
}

.listing li .content {
    float: left;
    position: relative;
    display: block;
    width: 74.468085099%;
    height: 100%;
    padding: 0;
    margin: 0;
}

HTML：

<div class="listing">
    <ul>
        <li>
            <div class="user">
                <div class="photo">
                    <a href="#"><img src="URL" /></a>
                </div>
                <a class="button">Follow</a>
            </div>
            <div class="content">
                -- normal html formatting --
            </div>
        </li>
    </ul>
</div>

Answer 1

我会设置容器的宽度，然后只使用style="max-width:100%"标记上的属性img。

<p><img src="http://whiterootmedia.com/images/css_rule.jpg" alt="css rule" style="max-width:100%" /></p>

以下是一个示例：http://www.whiterootmedia.com/database/dusty_arlia/what_are_css_selectors.html

Answer 2

将 img 包裹在 div 中。
将 div overflow-y样式属性设置为hidden。
根据您的喜好设置图像宽度。
将 div 宽度设置为图像宽度。

<强>更新

var imgs = document.getElementsByTagName('img') /* get all image elements */,
    i,
    div;

for (i = 0; i < imgs.length; i++) {
    div = document.createElement('div');
    // set the div overflow-y style property to hidden
    div.style.overflowY = 'hidden';
    // wrap the image in the div
    div.appendChild(imgs[i]);
    imgs[i].parentElement.replaceChild(div, imgs[i]);
    // set the image width to your liking
    imgs[i].style.width = YOUR_WIDTH + 'px'; // replace YOUR_WIDTH with whatever you want
    // set the div width to image width
    div.style.width = imgs[i].style.width;
}

注1 ：我没有测试它但它应该可以正常工作

注意2 ： Div 默认情况下显示为阻止，请考虑使用 span 或设置div display样式为inline，如果您希望它们以内联方式显示。

Answer 3

This post解释了如何保持div总是平方，只使用HTML和CSS。但它使用一些position:absolute来实现这一目标。但这只是添加一个包含position:relative;的问题，所以它的顶部/底部/左/右将尊重包装器而不是使用窗口的位置。

对于大于正方形时要裁剪的图像，只需在方形div上添加overflow:hidden;，同时在图像上添加max-width:100%;，这样它就会始终保持自己的宽高比，而永远不会裁剪（宽度）。

按图像宽度大小设置div包装器的高度

3 个答案: