Question

现在我在彼此旁边有两个div，就像这样：

#include

图像的CSS如下：

<div class="col-md-12 col-xs-12">

    <div class="col-md-6 col-xs-12">
        <img src="#"/>
        <article>text</article>
    </div>

    <div class="col-md-6 col-xs-12">
        <img src="#"/>
        <article>text</article>
    </div>
</div>

这给了我以下内容。

在图片中，图像具有相同的大小和相同的比例，因此容器的大小完全相同。

用户可以上传此字段中的图像，这意味着图像可以是各种尺寸。一旦我上传了较小或不同比例的图像，容器就会获得不同的高度（因为宽度为100％）。

这需要响应，并且其中一个容器可以填充嵌入的YouTube视频（iframe），这需要与所有图像具有相同的高度和宽度。

我如何得到这个结果？

Answer 1

如果您想根据图像高度拉伸每个项目，可以使用flex相当简单地实现。我对您的标记稍作调整，但这个示例应该是说明性的。基本上，使用柔性包装来创建多线柔性布局，将每个项目的宽度限制为50％，并确保图像具有最大宽度。

＆＃13;

* {        
    box-sizing: border-box;
}
.flex {
	display: flex;
	flex-wrap: wrap;
	max-width: 800px;
}

.flex-item {
	display: flex;
	width: 50%;
}
.article {
	display: block;
	margin: 10px;
	background-color: red;
}
.article img {
	width: 100%;
    height: 50px;
    object-fit: cover;
}

＆＃13;

<div class="col-md-12 col-xs-12 flex">
    <div class="col-md-6 col-xs-12 flex-item">
    	<div class="article">
	        <img src="http://placehold.it/500x150"/>
	        <article>text<br>more text<br>more text</article>
        </div>
    </div>

    <div class="col-md-6 col-xs-12 flex-item">
    	<div class="article">
    		<img src="http://placehold.it/500x300"/>
        	<article>text</article>
    	</div>
    </div>

    <div class="col-md-6 col-xs-12 flex-item">
	    <div class="article">
		    <img src="http://placehold.it/500x100"/>
	    <article>text</article>
    	</div>
    </div>

    <div class="col-md-6 col-xs-12 flex-item">
	    <div class="article">
	        <img src="http://placehold.it/500x170"/>
	        <article>text<br>more text</article>
    	</div>
    </div>
</div>

＆＃13;

Answer 2

您可以使用CSS属性background-size。

.image {
  background-size: 300px 100px, cover;
}

这是live demo。

More info on scaling images

Answer 3

如果您有视频，那么您也应该使用图像容器的视频宽高比。这可以通过padding-bottom 56.25%使用 16x9 宽高比来实现。要获得可以填充图像和/或视频的响应式容器，您必须使用此内容的包装器：

＆＃13;

* {
  box-sizing: border-box;
}

.row::after {
  clear: both;
  content: '';
  display: table;
}

.cell {
  float: left;
  padding: 10px;
  width: 50%;
}

.media {
  height: 0px;
  padding-bottom: 56.25%;
  position: relative;
}

.media img,
.media video,
.media iframe {
  height: 100%;
  left: 50%;
  max-width: 100%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

＆＃13;

<div class="row">
  <div class="cell">
    <div class="media">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=16x9&w=320&h=180">
    </div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
  </div>
  <div class="cell">
    <div class="media">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1%C3%971&w=320&h=320">
    </div>
    <p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
  </div>
</div>

＆＃13;

如何在任何时候保持div相同的高度

3 个答案: