动态的图像宽度和高度
问题描述：
我想有一个图像组的三个图像。每个图像必须具有相同的动态高度，并且图像组必须使用它的父div的大小的100％（因此第一个图像的margin-left与最后一个图像的margin-right相同）动态的图像宽度和高度
基本上我需要的是完全动态的CSS或JS解决方案。
我的目标：Width, height and if possible margin between images should be dynamic.
我到目前为止有：
.img-group {
margin-top: 10px;
width: 100%;
}
.img {
\t float: left;
\t margin: 4%; /*Margin should, but doesn't have to be dynamic...*/
\t 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>
答
.img-group {
margin-top: 10px;
width: 100%;
}
.img {
\t float: left;
\t 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>
答
我不能说我completel你明白你在做什么，但这是我的回答。
您可以编辑样式的高度，图像和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>
答
如果你的形象总是相同的大小已知的，并且你需要设置宽度，使他们能够填满整个行和调整大小以相同的高度。
Snippet 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>
是相同的纵横比或尺寸的源图像？ –