-1

将尝试重新解释我在这里尝试做的事情。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>
4

3 回答 3

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

于 2013-04-25T13:19:48.150 回答
0

这篇文章解释了如何只使用 HTML 和 CSS 保持 div 始终为正方形。但它使用一些position:absolute来实现这一点。但这只是添加一个包装器的问题，position:relative;因此它的顶部/底部/左侧/右侧将尊重包装器而不是使用窗口的位置。

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

于 2013-04-26T21:31:48.170 回答
0
  1. 将img包装在div中。
  2. 将div overflow-y样式属性设置为hidden.
  3. 根据您的喜好设置图像宽度。
  4. 将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默认显示为block ，如果您希望它们内联显示，请考虑使用span或将 divdisplay样式设置为。inline

于 2013-04-25T13:15:41.860 回答