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

我将尝试重新解释我在这里要做的事情。关于

div

/

img

示例，似乎有点混乱。简言之，我试图做的是在一个图像周围创建一个包装器，它保持为正方形，但随着浏览器窗口的调整而相应地扩展大小。正方形内的图像还将调整正方形包装（

div

）内的大小以填充空间。这些图像的宽度几乎相同，但高度不同，我想在顶部定位，并隐藏底部，以防出现比方形包装更大的图像。由于方形包装将随窗口调整大小，因此我无法将实际大小设置为该

div

，但希望自动调整

希望这有帮助

这就是我想到的。这似乎在很大程度上起了作用

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

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

有人有什么建议要补充吗

---原始描述----

我正在寻找创建一个有图像响应的网页。不幸的是，并非所有图像都具有相同的高宽比。因此，我们考虑在图像周围创建一个包装器，根据图像的当前宽度设置高度，其余部分将被隐藏。寻找最好最简单的方法来做到这一点

这样做的目的是创建一个2列的项目列表，这些项目随着浏览器的宽度而扩展。但不幸的是，由于图像尺寸的原因，一些物品比其他物品高。我想把图像放在一个正方形的盒子里，宽度相等，以符合要求。但我不想调整图像的高度，只需填充100%的宽度，并在底部溢出

CSS:

HTML:

跟随
--普通html格式--

将img包装在div中

将div样式属性设置为

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;
}

var imgs=document.getElementsByTagName（'img'）/*获取所有图像元素*/，
我
分区；
对于（i=0；i

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

---

<强> >强> div <强> S默认情况下显示为<强>块< /强> s，考虑使用<强>跨度< /强> s，或设置div <代码>显示< /代码>样式为<代码>内联< /代码>如果您想将它们显示为内联。

< p>我将设置容器的宽度，然后只使用属性<代码>样式=“最大宽度：100%”位于

img

标签上

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

这里有一个例子：

解释了如何始终保持div平方，只使用HTML和CSS。但是它使用了一些

位置：绝对
来实现这一点。但这只是添加一个带有
位置：相对；
的包装，因此它的上/下/左/右将尊重包装的位置，而不是使用窗口的位置

对于大于正方形的图像，只需在正方形div上添加
溢出：隐藏；
，同时在图像上添加
最大宽度：100%；
，这样它将始终保持自己的纵横比，而不会被裁剪（宽度）。
代码，它在哪里？（向我们展示您尝试过的内容和正在努力的内容）我认为如果你同意将所有宽度定义为相同，那么这是最好的主意。而且它不使用js，因此这是一个更好的解决方案。如果你想让图像放在一个宽度和高度等于图像宽度的框中，那么这样做是行不通的。尽量不要手动编写宽度/高度的代码，这样它们可以在浏览器已调整大小。这就是此解决方案的优点。请将容器设置为所需的大小（即像素、em、%等），然后图片将缩放以适合其内部。无需裁剪或图片尺寸。如果您查看我的链接（）整个页面都是响应性的。在我上面的例子中，
实际上会随着浏览器窗口的宽度而扩展。因此div“.user”也会在
的每一部分中扩展，因此div带有图像“.photo”“也扩大了。我正在寻找一种方法，使照片保持相同的正方形，但使用的照片有不同的高度。因此，正在寻找一种方法来限制“.photo”的高度比与包装容器“.user”的宽度。我正在尝试动态地进行此操作，不想设置静态宽度/高度。您所说的动态是什么意思？你可以用javascript设置宽度和样式。你能推荐一些脚本或插件吗？
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;
}

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