html - 如何仅使用 css 重现duckduckgo 搜索的图片库效果
问题描述
我正在尝试为每种形状的图像创建一个图库，这就像duckduckgo 桌面浏览器中的图像搜索：图像填充每一整行。
为了实现这一点，duckduckgo 保持一个恒定的高度并稍微减小图像的水平尺寸以具有完美的宽度。我想用纯CSS来做
如果您在 dadduckgo 中搜索鱼图像，这里是一个示例：https ://duckduckgo.com/?q=fish&t=newext&atb=v246-1&iar=images&iax=images&ia=images
您可以看到每个图像如何保持它们的近似比例，但稍作修改以完美适应整个视图宽度，从而提供了一个组织良好的图像库，具有各种图像大小
第一次尝试：图像拉伸
我开始使用该flex: 1;属性，或者在我的情况下更准确地说：flex: 1 1 0;对于该flex-grow属性，这给了我一些图像变得更大以填满整行的东西，但其中一些拉伸得太硬了，所以在某些大小的窗口它真的诡异的
第二次尝试：盒子内的图像
然后我试着把图片放在一个盒子里，这样就可以做成长的视觉效果，而不改变图片的宽度，但这不是很好
第三次尝试：通过切割缩小图像
所以后来我尝试重现duckduckgo的方法，缩小图像而不是放大它们。我以为我可以用 flex-shrink 轻松地做到这一点，但我无法让它工作，所以我手动将图像放在一个-30px左右尺寸较小的盒子中，它们会随着 flex 自动增长，揭示隐藏的图像的一部分。
有时它会增长超过图像宽度，所以我们可以看到背景，这没关系，但它并不好看，因为有些图像真的太薄了
第四次尝试：最小化减少
所以我尝试了最小尺寸，它更好，但仍然一点也不令人满意
/*GALERY*/
/*first gallery and default settings*/
.galery {
display: flex;
flex-wrap: wrap;
}
.galery .card {
display: flex;
/*direction column for the text under the img*/
flex-direction: column;
/*flex-grow is what let the cards containing
the images grow until it fills the entire row*/
flex: 1 1 0;
margin: 20px;
}
.galery .card img {
/*a constant height for the effect of all images aligned*/
height: 200px;
}
.galery .card p {
/*the text on the left*/
margin-left: 0px;
}
.galery .card > * {
/*vertical margin of 5px is for the gap between <img> and <p>*/
/*horizontal margin of 0px is what makes the img
stretch to fit the div element*/
margin: 5px 0px;
}
.galery::after {
/*this pseudo-element is used to create an empty area after
the last card to avoid it to grow on an entire line*/
content: "";
flex: 10;
}
/*second gallery : space around the img*/
.galery.space .card .image_background {
/*the div .img_background is used to make the
frame visible when the img do not stretch*/
display: flex;
width: 100%;
background-color: hsl(0, 0%, 95%);
}
.galery.space .card .image_background img {
/*margin auto avoid the image to stretch*/
margin: auto;
}
/*third gallery : images cutted*/
/*images are inside an element that cut them horizontally
so when flex-grow expend them they fill the frame without
empty space most of the case*/
.galery.cut .card .image_background {
display: flex;
/*this wrapper takes 100% of the width and hides the img overflow*/
width: 100%;
overflow: hidden;
background-color: hsl(0, 0%, 95%);
}
.galery.cut .card .image {
/*this wrapper contains the img and has a width independent of the parent element*/
margin: auto;
}
.galery.cut .card .image img {
/*because of this negative margin, the wrapper .image is
thinner than the image, of 60px, so it can grow with less
chance of exceeding the img size*/
margin: auto -30px;
}
/*fourth gallery : minwidth to avoid having really small img*/
.galery.minwidth .card {
min-width: 150px;
}<!-- the html code is just 4 times the same gallery of 17 img,
with different div elements to wrap what is needed for the css -->
<p>_images horizontal stretch_____________________________________________</p>
<div class="galery">
<div class="card">
<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.webindia123.com/pets/fish/bett.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.webindia123.com/pets/fish/neon.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<p>_images horizontal extra space_________________________________________</p>
<div class="galery space">
<div class="card">
<div class="image_background">
<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.webindia123.com/pets/fish/bett.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.webindia123.com/pets/fish/neon.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<p>_images horizontaly cut________________________________________________</p>
<div class="galery cut">
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.webindia123.com/pets/fish/bett.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.webindia123.com/pets/fish/neon.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<p>_images horizontaly cut with minimum width_____________________________</p>
<div class="galery cut minwidth">
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.webindia123.com/pets/fish/bett.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.webindia123.com/pets/fish/neon.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>你知道如何做得更好吗？
我真正想做的是一个图片库
解决方案
推荐阅读
- codeigniter - 如何在 Codeigniter 1 中更改管理员登录 url？
- javascript - 使用 OpenLayers 和 CSS 网格布局时如何正确设置对齐方式
- sql - 在 SQL 中正确显示下一个计费周期开始日期 - [应根据报表运行日期显示未来计费日期]
- rust - 嵌套循环打印奇怪的结果
- java - Android - 在单独的线程中从 for 循环更新进度条
- r - 如何合并数据库，将一个值重复到另一个值中？
- android - 带有标题的 Recylerview 显示数据但负 1
- javascript - 在 for 循环中附加子文本的最佳实践
- c++ - SQL Server 连接 C++
- android - 如何读取安装在 android 7 版本上的 .pkcs12 证书