Html 图像高度与宽度相同

我有一个容器内的图像，我希望它是一个完美的正方形。我将宽度设置为容器的100%，目标是使图像的

高度

与宽度相同，因为由于响应性设计，我不知道容器的大小

有什么想法吗？如果有帮助的话，我正在使用sass

.container{
宽度：50%；
}
.集装箱img{
宽度：100%；
高度：400px；//这应该与宽度值相同。。
}

---

也许这对你有用

.container img {
 width: 100%;
 padding-bottom: 100%;
}

---

我们中的许多人在评论中给了你一些提示，所以现在你应该能够创建一个响应方了

---

将图像放在正方形内 为了防止您丢失最后一部分，下面是如何将图像（具有任何纵横比）适配到该正方形中的方法。这也意味着，如果你的图像不是正方形，它将被裁剪

片段：

.container{
位置：相对位置；
宽度：37%；/*您想要的尺寸*/
}
.货柜：之后{
内容：“；
显示：块；
填充底部：100%；/*填充取决于宽度，而不是高度，因此，填充底部为100%时，将得到一个正方形*/
}
.集装箱img{
位置：绝对；/*从流中取出您的照片*/
排名：0；
底部：0；
左：0；
右：0；/*使图片与其父对象的大小相同*/
宽度：100%；/*如果适合对象，则为*/
高度：100%；/*如果适合对象，则为*/
对象适合度：cover；/*相当于背景图像的背景大小：cover*/
对象位置：中心；
}

---

另一个技巧是将图像本身应用到自己的背景中，然后应用高度为0的垂直填充方法

下面的演示（带有Dummy图像，我看不到你的）

.container{
宽度：50%；
}
.集装箱img{
宽度：100%；
高度：0px；/*填充将在此处调整大小*/
填充：50%0；/*使其成为正方形=100%垂直填充，无水平填充*/
背景图片：url(http://dummyimage.com/750x1260/951&text=My_BG_Image)；/*使用了与标记中颜色不同的颜色*/
背景大小：100%100%；
/*重置以防万一*/
背景剪辑：边框框；
框大小：边框框；
}

---

将其添加到样式文件的顶部：

    :root{
  --size: 100px;
}

然后将定义的变量同时赋予宽度和高度：

width: var(--size);
height: var(--size);

---

如果您愿意使用背景图像，则此解决方案将起作用

这将保持一个平方比，使图像覆盖整个div。如果图像宽度大于高度，它还将使图像居中并裁剪侧面

HTML

<div class='square-box'>
    <div class='square-content'></div>
</div>

---

可能重复的我认为没有纯css解决方案可能重复的@mr.void有一个css解决方案。出售所有已发布的链接。@HereticMonkey我认为作者需要在一个有响应的正方形中放置一个图像（任何纵横比）。正如你所看到的，在他的例子中，图像不是正方形。如果这真的是一个复制品，你可能不应该回答它…@HereticMonkey我知道，但我在正方形内找不到图像的asnwer。我读到的所有答案都只是关于广场的创建。如果我找到一个有图像的，我会删除answer@AmauryHanser：太棒了！我节省了很多时间！多谢各位@AmauryHanser非常感谢这个解决方案，帮助了我很多这实际上解决了我的问题。不要删除此帖子。这只适用于具有背景颜色或背景图像的标签，不适用于标签

.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url(https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-position: center;
    background-size: 100% 100%;
    background-size: cover;
}