Question

我想要一个由三个图像组成的图像组。每个图像都必须具有相同的动态高度，图像组必须使用其父div的100％（因此第一个图像的左边距与最后一个图像的边距相同）< / p>

基本上我需要的是CSS或JS解决方案，它是完全动态的。

我的目标：Width, height and if possible margin between images should be dynamic.

到目前为止我所拥有的：

.img-group {
  margin-top: 10px;
  width: 100%;
}

.img {
	float: left;
	margin: 4%; /*Margin should, but doesn't have to be dynamic...*/
	height: 20%; /*Height has to be dynamic...*/
}

<div class="container">
  <div class="img-group">
    <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Digital_Europe_Ultra_HD_-_Logo.svg/1024px-Digital_Europe_Ultra_HD_-_Logo.svg.png">
    <img class="img" src="http://lofrev.net/wp-content/photos/2017/03/4k_ultra_hd_logo.jpg">
    <img class="img" src="http://hometheaterreview.com/4K-HDR-logo-thumb.jpg">
  </div>
</div>

Answer 1

＆＃13;

.img-group {
  margin-top: 10px;
  width: 100%;
}

.img {
	float: left;
	margin: 0 4%; /*Margin should, but doesn't have to be dynamic...*/ /*Height has to be dynamic...*/
  max-height: 30px;
  height: auto;
}
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

＆＃13;

<div class="container">
  <div class="img-group">
    <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Digital_Europe_Ultra_HD_-_Logo.svg/1024px-Digital_Europe_Ultra_HD_-_Logo.svg.png">
    <img class="img" src="http://lofrev.net/wp-content/photos/2017/03/4k_ultra_hd_logo.jpg">
    <img class="img" src="http://hometheaterreview.com/4K-HDR-logo-thumb.jpg">
  </div>
</div>

＆＃13;

Answer 2

我不能说我完全理解你想要完成的事情，但这是我尝试回答的问题。

您可以编辑样式和图像的高度，并相应地展开img-group潜水。

我把边框放在元素周围，看看＆＃34;空间＆＃34;每个元素。您可以从样式中删除它们。

＆＃13;

.container {
  width: 800px;
  height: 300px;
  position: relative;
  display: block;
  border: 4px solid red;
}

.img-group {
  height: 97.5%;
  position: relative;
  display: block;
  border: 4px solid purple;
}

.img {
  float: left;
  margin: 1%;
  /*Margin should, but doesn't have to be dynamic...*/
  height: 40%;
  /*Height has to be dynamic...*/
  border: 4px solid green;
  position: relative;
  display: inline;
}

＆＃13;

</style>

<div class="container">
  <div class="img-group">
    <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Digital_Europe_Ultra_HD_-_Logo.svg/1024px-Digital_Europe_Ultra_HD_-_Logo.svg.png">
    <img class="img" src="http://lofrev.net/wp-content/photos/2017/03/4k_ultra_hd_logo.jpg">
    <img class="img" src="http://hometheaterreview.com/4K-HDR-logo-thumb.jpg">
  </div>
</div>

＆＃13;

Answer 3

如果您的图像始终相同并且已知大小，则需要设置宽度，以便它们可以填满整行并调整到相同的高度。

Snippet CSS评论。

＆＃13;

.container {
  width:80%;/* whatever*/
  margin:auto;
  border:solid;/* see me */
  overflow:hidden;/* wraps float*/
  /* or use :
  display:flex;
  */
}
img {
  float:left;/* unless parent is set to display:flex;,but it will be a fallback for old browsers*/
  width:20.1%;/* the smallest, others will be reset */      
}
img[src*="Logo.svg.png"] {
  width:52.1%;/* obviously the widest*/
}
img[src*="logo.jpg"] {
  width:27.77%;/* the other one */
}

＆＃13;

<div class="container">
  <div class="img-group">
    <img class="img" src="http://lofrev.net/wp-content/photos/2017/03/4k_ultra_hd_logo.jpg"/>
    <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Digital_Europe_Ultra_HD_-_Logo.svg/1024px-Digital_Europe_Ultra_HD_-_Logo.svg.png"/>
    <img class="img" src="http://hometheaterreview.com/4K-HDR-logo-thumb.jpg"/>
  </div>
</div>

＆＃13;

图像的动态宽度和高度

3 个答案: