如何仅使用css重现duckduckgo搜索的图库效果

问题描述

我正在尝试为各种形状的图像创建一个画廊，这就像在duckduckgo 桌面浏览器中搜索图像一样：图像填充每一整行。

为了实现这一点，duckduckgo 保持一个恒定的高度，并略微减小图像的水平尺寸以获得完美的宽度。我想用纯 css 来做

以下是您在duckduckgo 中搜索鱼图片的示例：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,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>

你知道如何做得更好吗？

我真正想做的是在女巫中建立一个图像库，我可以在没有特定设置的情况下放置任何图像，无论其大小如何，如果您有其他设计解决方案而不是duckduckgo 版本，我在听

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）