- 1 行,里面有 3 张图片。
- 1 行,里面有 2 张图片。
如何让 100%-width-container 内的图片高度相等?
所有图像的宽度和高度都不一致。 我需要图像来保持它们的裁剪和纵横比。 它们不需要具有相同的宽度。
这是到目前为止我使用 flex-box 取得的成果。但是他们的高度不一样。我不介意使用 JavaScript 来解决这个问题。
我不想为容器或图像设置高度值。 有没有办法让图像在具有相同高度的同时均匀分布?
.wrapper {
width:100vw; /*should be width of browser*/
display:flex;
margin:0;
padding:0;
margin:0;
border:1px solid;
}
.image {
list-style:none;
margin: 50px 1.5%;
}
.image:first-child {
margin-left:0;
}
.image:last-child {
margin-right:0;
}
img {
width:100%
}
<ul class="wrapper three_images">
<li class="image"><img src="http://lorempixel.com/600/800/"></li>
<li class="image"><img src="http://lorempixel.com/400/850/"></li>
<li class="image"><img src="http://lorempixel.com/550/700/"></li>
</ul>
<ul class="wrapper two_images">
<li class="image"><img src="http://lorempixel.com/600/800/"></li>
<li class="image"><img src="http://lorempixel.com/400/850/"></li>
</ul>
最佳答案
这是一个使用 jQuery 的解决方案:
$(".wrapper").each(function () {
/** Push all images size in an array **/
let imagesSize = [];
$(this)
.find("img")
.each(function () {
let imgWidth = $(this).width();
let imgHeight = $(this).height();
imagesSize.push([imgWidth, imgHeight]);
});
/** Assign the same height to all the images **/
let newImagesSize = [];
let totalWidth = 0;
let referenceHeight = imagesSize[0][1];
imagesSize.forEach(function (imageSize, index) {
let heightRatio = referenceHeight / imageSize[1];
let newImgWidth = imageSize[0] * heightRatio;
let newImgHeight = imageSize[1] * heightRatio;
newImagesSize.push([newImgWidth, newImgHeight]);
totalWidth += newImgWidth;
});
/** Get the total width of all the images, the width of the wrapper and addapt the width/height of each images **/
let wrapperWidth = $(this).width();
let widthRatio = wrapperWidth / totalWidth;
$(this)
.find("img")
.each(function (index, el) {
let imgWidth = newImagesSize[index][0] * widthRatio;
let imgHeight = newImagesSize[index][1] * widthRatio;
$(this).css({ width: imgWidth, height: imgHeight });
});
});
$(document).ready(function () {
$(".wrapper").each(function (index, el) {
/** Push all images size in an array **/
let imagesSize = [];
$(this)
.find("img")
.each(function () {
let imgWidth = $(this).width();
let imgHeight = $(this).height();
imagesSize.push([imgWidth, imgHeight]);
});
/** Assign the same height to all the images **/
let newImagesSize = [];
let totalWidth = 0;
let referenceHeight = imagesSize[0][1];
imagesSize.forEach(function (imageSize, index) {
let heightRatio = referenceHeight / imageSize[1];
let newImgWidth = imageSize[0] * heightRatio;
let newImgHeight = imageSize[1] * heightRatio;
newImagesSize.push([newImgWidth, newImgHeight]);
totalWidth += newImgWidth;
});
/** Get the total width of all the images, the width of the wrapper and addapt the width/height of each images **/
let wrapperWidth = $(this).width();
let widthRatio = wrapperWidth / totalWidth;
$(this)
.find("img")
.each(function (index, el) {
let imgWidth = newImagesSize[index][0] * widthRatio;
let imgHeight = newImagesSize[index][1] * widthRatio;
$(this).css({ width: imgWidth, height: imgHeight });
});
});
});
.image {
float: left;
}
li {
list-style-type:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrapper three_images">
<li class="image"><img src="https://via.placeholder.com/300x750.jpeg/FFFF00"></li>
<li class="image"><img src="https://via.placeholder.com/400x300.jpeg/0000FF"></li>
<li class="image"><img src="https://via.placeholder.com/500x550.jpeg/FF0000"></li>
</ul>
<ul class="wrapper two_images">
<li class="image"><img src="https://via.placeholder.com/600x800.jpeg/808080"></li>
<li class="image"><img src="https://via.placeholder.com/400x850.jpeg/dddddd"></li>
</ul>
关于javascript - 填满容器宽度的等高图像网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42029282/