我有一张带有照片的小照片库。
它在PC（全尺寸）上看起来不错，但是当我调整它（用于手机）时，它不会保持它的宽高比而且只能拉伸它。
这就是它现在的样子：https://gyazo.com/a1f605bb410865579025644b0a267adf
此外，正如您所看到的那样，它会转到1张图像，并且在某一点上它会在一瞬间返回到2张图像，之后会保留在1张图像上。我该如何解决这个问题？
这是我的CSS：
#images{
display: flex;
flex-wrap: wrap;
}
.image{
display: flex;
flex: 1;
margin: 5px;
min-width: 250px;
min-height: 187.5px;
object-fit: contain;
}
.image > img{
flex: 1;
}
这是我的HTML：
<div id="images">
<div class="image">
<img src="f1.jpg">
</div>
<div class="image">
<img src="f2.jpg">
</div>
<div class="image">
<img src="f3.jpg">
</div>
<div class="image">
<img src="f1.jpg">
</div>
//it just goes on and on like this
//it's all temporary now, I will eventualy replace
//this with a simple loop.
</div>
答案 0 :(得分：1)
除非您有非常具体的要求，否则我建议Masonry：
JavaScript网格布局库。它通过放置元素来工作 基于可用垂直空间的最佳位置，类似于a 梅森拟合石头在墙上。你可能已经看到它全部使用了 通过互联网。
与imagesLoaded结合使用适用于多功能轻量级解决方案。
实施砌体的方法有很多种。
以下是我个人的最爱。
我的所有评论都在下面的代码段中
body {
background: #131418;
}
/* Step 1: start with resetting some defaults */
* {
margin: 0 auto;
padding: 0;
max-width: 100%;
}
/* Step 2: center things inside the grid and clear some space around it by setting a device based max-width and margin*/
.grid {
text-align: center;
max-width: 95vw;
margin: 2.5vw auto;
}
/* Step 3: how big should the gap be between grid items? remember that the total gap between two items would be double what you set here since both would have that amount set as their individual padding. Also add box-sizing:border-box to make sure the padding doesn't affect the total widh of the item */
.grid-item {
padding: 5px;
box-sizing: border-box;
}
/* Step 4: Add media queries (subjective) to make the whole grid resposive. */
@media (min-width: 500px) {
.grid-item {
width: 50%;
}
}
@media (min-width: 1000px) {
.grid-item {
width: 33.333%;
}
}
@media (min-width: 1700px) {
.grid-item {
width: 25%;
}
}
@media (min-width: 2100px) {
.grid-item {
width: 20%;
}
}<!-- Made possible by the great work of David DeSandro @ https://masonry.desandro.com -->
<!-- Part 1: Add the scripts -->
<!-- Step 1: Let's start by loading jQuery. jQuery is not required for masonary to function but makes things easier -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Step 2: Then load imagesloaded. imagesloaded makes sure the images are not displayed until they are fully loaded -->
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<!-- Step 3: we load masonry -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<!-- Part 2: Create the grid -->
<!-- Step 1: Start with a the main grid wrapper-->
<div class="grid">
<!-- Step 2: Add grid items--->
<div class="grid-item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/00/37/03/0037037f1590875493f413c1fdbd52b1--cool-beards-inspiring-photography.jpg" />
</div>
<div class="grid-item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/cd/90/d9/cd90d9de63fa2c8e5c5e7117e27b5c18--gritty-portrait-photography-studio-photography.jpg">
</div>
<!-- Step 3: repeat...--->
<div class="grid-item">
<img src="https://1.bp.blogspot.com/-9QM7ciGXRkQ/V1hsB-wNLBI/AAAAAAAAMoA/eYbSHs00PTAjrI4QAmvYAIGCUe1AuRAnwCLcB/s1600/bryan_cranston_0095.jpg">
</div>
<div class="grid-item">
<img src="http://webneel.com/sites/default/files/images/project/best-portrait-photography-regina-pagles%20(10).jpg" />
</div>
<div class="grid-item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/dd/45/96/dd4596b601062eb491ea9bb8e3a78062--two-faces-baby-faces.jpg" />
</div>
<div class="grid-item">
<img src="http://www.marklobo.com.au/news/wp-content/uploads/2013/03/Melbourne_Portrait_Photographer_Mark_Lobo-Cowboy.jpg" />
</div>
<div class="grid-item">
<img src="https://format-com-cld-res.cloudinary.com/image/private/s--PcYqe7Zw--/c_limit,g_center,h_65535,w_960/a_auto,fl_keep_iptc.progressive,q_95/145054-8576001-Rob-Green-by-Zuzana-Breznanikova_7725_b_w.jpg" />
</div>
<div class="grid-item">
<img src="http://www.iefimerida.gr/sites/default/files/janbanning11.jpg" />
</div>
<div class="grid-item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/66/bb/e7/66bbe7acc0d64da627afef440a29714b--portrait-photos-female-portrait.jpg" />
</div>
<div class="grid-item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/25/34/b6/2534b6c18c659546463f13b2dc62d4ce--natural-portraits-female-portraits.jpg" />
</div>
<div class="grid-item">
<img src="https://s-media-cache-ak0.pinimg.com/originals/8d/67/12/8d671230ced871df8428b571ed6ec192.jpg" />
</div>
</div>
<!-- Part 3: the script call -->
<!-- Now that everything is loaded we create a script to trigger masonary on $grid. Note that this simply says: "if the images are fully loaded, trigger masnory on $grid. -->
<script>
$(".grid").imagesLoaded(function() {
$(".grid").masonry({
itemSelector: ".grid-item"
});
});
</script>
答案 1 :(得分：0)
更新 - 我添加了一个示例。
#images {
display: flex;
flex-wrap: wrap;
}
.image {
flex: 1;
}
.image img {
width: 100%;
height: auto;
}<div id="images">
<div class="image">
<img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9">
</div>
<div class="image">
<img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9">
</div>
<div class="image">
<img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9">
</div>
<div class="image">
<img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9">
</div>
</div>
为了保持图像宽高比，您可以定义width:100%和height:auto。
它会在保持纵横比的情况下将图像调整到容器的宽度。
答案 2 :(得分：0)