图像的动态宽度和高度

Posted 2023-05-09

【中文标题】图像的动态宽度和高度

【英文标题】：Dynamic width and height of images

【发布时间】：2018-01-13 14:36:34

【问题描述】：

我想要一个包含三个图像的图像组。每张图片都必须具有相同的动态高度，并且图片组必须使用其父 div 大小的 100%（因此第一张图片的左边距与最后一张图片的右边距相同）

基本上我需要的是一个完全动态的 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>

【问题讨论】：

您的源图像是否具有相同的纵横比或大小？

【参考方案1】：

.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;

<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>

【参考方案2】：

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

片段 CSS 已评论。

.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 */

<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>

【参考方案3】：

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

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

我在元素周围放置边框以查看每个元素的“空间”。您可以将它们从样式中移除。

.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;

</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>