CSS - 保持图像纵横比flexbox [英] CSS - Keep image aspect ration flexbox
本文介绍了CSS - 保持图像纵横比flexbox的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
它在pc（全尺寸）上看起来不错，但是当我调整它的大小（手机）时，不保持它的长宽比，它只是拉长了。
这就是现在的样子： https：// gyazo.com/a1f605bb410865579025644b0a267adf1
另外，正如您所看到的，它会转换到1张图片，并且在某个点上可以返回到2张图片第二，它保持在1图像之后。
这是我的CSS：
#images {
display：flex;
flex-wrap：wrap;
}
.image {
display：flex;
flex：1;
保证金：5px;
min-width：250px;
min-height：187.5px;
object-fit：contains;
}
.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>
//它只是继续下去，像这样
//现在都是临时的，我会用一个简单的循环来取代
//这个。
< / div>
解决方案除非您有非常具体的要求，否则我建议砌体材料：
a JavaScript网格布局库。它的工作原理是根据可用的垂直空间将元素放置在
的最佳位置，有点像镶嵌在墙上的
石匠。您可能已经在互联网上看到了所有
的使用。
与 imagesLoaded 为多功能的轻量级解决方案。
有很多方法可以实现Masonry。
以下是我个人的最爱。 b
$ b
我所有的评论都在下面的代码片段中：
body {background：＃131418;} / *第一步：重新设置一些默认值* / * {margin：0 auto;填充：0;最大宽度：100％;} / *第2步：通过设置一个基于设备的最大宽度和边距* /。grid {text-align：center;最大宽度：95vw;保证金：2.5vw自动;} / *步骤3：网格项目之间的差距有多大？请记住，两个项目之间的总差距将是你在这里设置的两倍，因为这两个项目都将其数量设置为它们各自的填充。 grid-item {padding：5px;}这个方法也可以添加box-sizing：border-box来确保填充不会影响项目的整个widh。 box-sizing：border-box;} / *步骤4：添加媒体查询（主观），使整个网格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％; }}
<！ - David DeSandro的工作@ https://masonry.desandro.com - ><！ - 第1部分：添加脚本 - ><！ - 第1步：开始加载jQuery。 jQuery并不是masonary所必需的，但是使得事情变得更简单 - >< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js> < / script><！ - 第2步：然后加载图片加载。 imagesloadedloaded确保图像在完全加载之前不显示 - >< script src =https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js>< / script> <！ - 步骤3：我们加载石匠 - >< script src =https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js>< /脚本><！ - 第2部分：创建网格 - ><！ - 第1步：以主网格包装器开始 - >< div class =grid> <！ - 步骤2：添加网格项目---> < 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> <！ - 步骤3：重复...---> < 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><！ - 第3部分：脚本调用><！ - 现在，所有的东西都被加载了，我们创建一个脚本来触发$ grid上的masonary。请注意，这只是说：如果图像被完全加载，触发$ grid上的masnory - >< script> $（。grid）。砌体（{itemSelector：.grid-item}）;}）;< / script>
$ b
I have a small photo gallery with some photo's.
It looks good on pc (full size), but when I resize it (for phone), it does not keep it's aspect ratio and it only streches the with.
This is what it looks like right now: https://gyazo.com/a1f605bb410865579025644b0a267adf
Also, as you can see it goes to 1 image, and at a certain point it goes back to 2 images for a split second and it stays on 1 image after. How do I fix that too?
This is my 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;
}
This is my 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>
解决方案 Unless you have very specific requirements, I suggest Masonry:
a JavaScript grid layout library. It works by placing elements in
optimal position based on available vertical space, sort of like a
mason fitting stones in a wall. You’ve probably seen it in use all
over the Internet.
in combination with imagesLoaded For a versatile lightweight solution.
There are many ways to implement Masonry.
The following is my personal favorite.
All my comments are inside the snippet below
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>
这篇关于CSS - 保持图像纵横比flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
