CSS - 具有相同高度但图像高度不同的 div答案

【问题标题】：CSS - Divs with same height, but different image heightsCSS - 具有相同高度但图像高度不同的 div
【发布时间】：2019-04-11 18:01:22
【问题描述】：

是否有可能拥有相同高度的 div，其中包含不同高度的图像？我不能使用height css 属性，因为我不知道高度。

* {
  box-sizing: border-box;
}

.magazine-items {
  width: 500px;
  display:flex;
  flex-flow:row wrap;
}

.magazine-item {
  width:33%;
  display: grid;
  grid-template-areas: "image image image"
                       "text text text";
  border: 1px solid red;
  align-content: flex-start;
}
.magazine-item img {
  width:100%;
}
.text{
  grid-area: text;
}
.img {
  grid-area: image;
}
.double-text {
  width:80%;
  margin:auto;
}

<div class="magazine-items">
	<div class="magazine-item">
		<div class="img">
			<img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/800px-Islas_Coronado.cc.jpg" alt="">
		</div>	
		<div class="text">
			<p>Porovnání detailů designu série Elle a Effe</p>
		</div>
	</div>
	<div class="magazine-item">
		<div class="img">
			<img src="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt="">
		</div>
		<div class="text">
			<p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.
			Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
		</div>
	</div>
	  <div class="magazine-item">
    <div class="img">
      <img src="https://dummyimage.com/600x400/000/fff" alt="">
    </div>	
    <div class="text">
      <p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
    </div>
  </div>
</div>

这是我设法用flexbox 和grid 做的，但它仍然不知道如何在不知道图像大小的情况下为 div 设置相同的高度。

有什么想法吗？谢谢

编辑：这是我的期望： Edit2：我重新提出我的问题。有没有机会在不使用javascript或固定高度的情况下获得图片中的div？

【问题讨论】：

你愿意改变你的 HTML 结构吗？
@CharuMaheshwari 是的，我可以完全改变 html 结构

标签： html css height

【解决方案1】：

你能用背景图片代替img吗？例如，您可以这样做。

.img {
    background: url(images/bg.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 600;
    height: 400;
}

【讨论】：

我无法设置图像的高度，因为我不知道它有多大，我必须使用img标签，因为用户将使用img标签添加图像

【解决方案2】：

如果您愿意稍微更改图片，您可以用图片“覆盖”特定尺寸 - 这样您就可以保留 img 标记，但让它们看起来更一致：

我在图片中添加了height: 150px 和object-fit: cover。

* {
  box-sizing: border-box;
}

.magazine-items {
  width: 500px;
  display: flex;
  flex-flow: row wrap;
}

.magazine-item {
  width: 33%;
  display: flex;
  flex-direction: column;
  border: 1px solid red;
}

.magazine-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.double-text {
  width: 80%;
  margin: auto;
}

<div class="magazine-items">
  <div class="magazine-item">
    <div class="img">
      <img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/800px-Islas_Coronado.cc.jpg" alt="">
    </div>
    <div class="text">
      <p>Porovnání detailů designu série Elle a Effe</p>
    </div>
  </div>
  <div class="magazine-item">
    <div class="img">
      <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt="">
    </div>
    <div class="text">
      <p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni. Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady
        Level jednu z nejoblíbenějších sérií značky Paffoni.Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
    </div>
  </div>
  <div class="magazine-item">
    <div class="img">
      <img src="https://dummyimage.com/600x400/000/fff" alt="">
    </div>
    <div class="text">
      <p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

将固定的min-height 添加到.img

* {
  box-sizing: border-box;
}

.magazine-items {
  width: 500px;
  display:flex;
  flex-flow:row wrap;
}

.magazine-item {
  width:33%;
  display: grid;
  grid-template-areas: "image image image"
                       "text text text";
  border: 1px solid red;
  align-content: flex-start;
}
.magazine-item img {
  width:100%;
}
.text{
  grid-area: text;
}
.img {
  grid-area: image;
  min-height: 250px;
}
.double-text {
  width:80%;
  margin:auto;
}

<div class="magazine-items">
	<div class="magazine-item">
		<div class="img">
			<img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/800px-Islas_Coronado.cc.jpg" alt="">
		</div>	
		<div class="text">
			<p>Porovnání detailů designu série Elle a Effe</p>
		</div>
	</div>
	<div class="magazine-item">
		<div class="img">
			<img src="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt="">
		</div>
		<div class="text">
			<p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.
			Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
		</div>
	</div>
	  <div class="magazine-item">
    <div class="img">
      <img src="https://dummyimage.com/600x400/000/fff" alt="">
    </div>	
    <div class="text">
      <p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
    </div>
  </div>
</div>

【讨论】：

就像我说的我不能使用高度，因为我不知道会有什么图像。并且图像必须使用img标签:(我想创建一个结构来在图像下方添加图像和文本。
你能把height设置为换行元素吗(.img)如果你把你想要的结果发布为iamge会很有帮助
仅供了解这里的结果就是你想要的？
当我运行您的代码时，我看到的结果与图像中的相同？你用什么浏览器？
Mozilla Firefox :)

【解决方案4】：

.captions {
  width: 33%;
  border: solid 1px;
}

img {
  max-width: 100%;
}

.wrapper {
  display: flex;
  width: 100%;
}

@media (min-width: 780px) {
  .wrapper {
    max-width: 780px;
  }
}
.d-flex {
  display: flex;
}

<body>
  <div class="wrapper">
    <div class="captions">
      <img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/800px-Islas_Coronado.cc.jpg" alt="">
    </div>
    <div class="captions">
      <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt="">
    </div>
    <div class="captions">
      <img src="https://dummyimage.com/600x400/000/fff" alt="">
    </div>
  </div>
  <div class="wrapper">
    <div class="captions">
      <p> This is for Div 1 </p>
    </div>
    <div class="captions">
      <p> This is for Div 2 </p>
    </div>
    <div class="captions">
      <p> This is for Div 3 </p>
    </div>
  </div>
</body>

【讨论】：

仍然不能使用height 值。如果一张图片变大怎么办？图像的高度不能相同。包含图像的 div 需要相同的高度。
我已经从 img 中删除了高度。看看它是否对你有用，
这是我的第一次尝试，但是现在，您将如何使这个响应？我需要响应式（图像、文本、图像、文本、图像、文本）
图像仍然是响应式的。它只是需要一些调整的容器。制作它们。请立即尝试
是的，但在这种情况下，您不会在每张图片下方显示文字？在响应式中，您将一张一张地获得所有图像和一张一张地获得所有文本