Html <；img>；高度等于其在div内的宽度

首先，我对CSS不是很在行，但我正在尝试使用CSS使

高度等于宽度。 我还使用了如下所示的引导，因此每列的宽度都是有响应的

@import'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
.album.album\u photo.photo\u link img{
宽度：100%；
}

---

考虑使用图像作为背景，同时使用。

您希望您的“

album\u photo

”类的宽度和高度为100%，因为它们将填充父元素中的空间，父元素的类为“

col-xs-3

”

CSS:

---

将边距和填充设置为0，您将看到img非常适合父元素。

您可以通过应用宽度和高度以任何方式缩放图像。例如，你可以说

.full-width-height { width: 100%; height: 100%; }

您还可以使用最小宽度、最大宽度、最小高度和最大高度

但是，您将遇到纵横比问题

您有两个选项可以使用CSS和

.auto-width { width: auto; height: xxx; } 
.auto-height { width: xxx; height: auto; } 

---

Bootstrap提供了一个您也可以使用的响应类。这门课是img响应的，你可以阅读。该类通常与中心块辅助类一起使用。

看看这支笔，您将知道如何使用填充底部技巧：

---

我喜欢这种方法。它使列的内容（在本例中为

.album\u photo

）

位置：相对
，设置元素的内部包装（'.photo\u link img'）
位置：绝对的高度为
100%
。为了保持列的形状，可以使用一个伪元素，该元素具有
填充顶部：100%
。之所以这样做，是因为基于百分比的填充始终与元素的宽度相关。因此，如果填充为
100%
，它将始终与宽一样高。您也可以使用相同的方法创建基于比率的容器大小（例如，对于具有绝对定位幻灯片的幻灯片，比例为3:1）。这是一个巧妙的把戏


@导入url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css);
.相册照片{
位置：相对位置；
溢出：隐藏；
}
.photo_link img{
位置：绝对位置；
排名：0；
左：0；
}
.相册照片：之后{
内容：''；
显示：内联块；
垂直对齐：顶部；
宽度：100%；
身高：0；
填充顶部：100%；
}

我有这个想法，但如果我能用Tag做会更好。请做一把小提琴或一支代码笔。我会帮你修的。我需要知道你现在的课程。您发布的代码不正确enough@Mojtaba对不起，我更新了我的问题。另外，你和我的名字一样：）没问题。重点是你找到了答案，你是个幸运的人；）@Mojtaba似乎我没有找到答案好吧，我编辑了Joseph的答案。这应该是你想要的now@sayed令人惊叹的！很高兴我能帮上忙。如果不同方向的图像混合在一起，这似乎不起作用，而
背景大小：封面
无论图像方向如何都能起作用。@MaratTanalin没错！Joseph有解决办法吗？还是我应该用背景法@sayed说，通过在
中将
高度
切换到
宽度
，并使用
顶部：50%
，
左侧：0
，以及
转换：translateY（-50%）
，它很容易适应肖像画，但据我所知，如果不使用逻辑语言（不是CSS）首先检查方向，就无法使用这种方法同时容纳纵向和横向图像。如果你想要这种灵活性，你必须放弃
img
标签的语义优势，将你的图像链接硬编码为背景图像内联样式。“这真的取决于应用程序当时的业务逻辑。”sayed说，“我收回这一点。。。这是可能的。我会更新我的答案。但这对纵横比没有帮助
.auto-width { width: auto; height: xxx; } 
.auto-height { width: xxx; height: auto; } 

.album_photo {
   position: relative;
   padding-bottom: 100%;
   overflow: hidden;
}

img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}