Question

我试图在一个循环中循环一组图像，每个图像都有不同的尺寸，如果我将 bgsize 设置为 30px，有些图像看起来更大有些更小

      <div style={{ background:`url(${image}) no-repeat center`,backgroundSize:'40px' }}></div>

Answer 1

如果您提供更多关于这些 div 具有的其他样式的代码上下文会有所帮助，因为默认情况下空 div 没有任何大小。

但是假设列表中的每个 div 都有固定的宽度和高度，我想问题是不同的图像具有不同的纵横比，这意味着更宽的图像在 div 中看起来更小，如下面的例子。

.container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

.bg {
  width: 80px;
  height: 80px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80px;
  margin-right: 0.5em;
}

<div class="container">
  <div class="bg" style="background-image: url('https://1.bp.blogspot.com/-1l4T6MDQgqo/WSKvmmZ-KJI/AAAAAAAAAyM/xD2vAPs6JF8pLJl6lhnceuRdKWntNYovACLcB/s1600/9.jpg');"></div>
  <div class="bg" style="background-image: url('https://worldoffloweringplants.com/wp-content/uploads/2016/05/Gaillardia-Blanket-Flowers.jpg');"></div>
  <div class="bg" style="background-image: url('https://jeffreyfavero.com/wp-content/uploads/2013/03/JFP-WYO-105.jpg');"></div>
</div>

至少有两种方法可以使这看起来更好，具体取决于您的场景上下文。

为 background-size 提供两个值固定图像的宽度和；通过只设置一个值，您在设置宽度的同时允许高度自动缩放。在我的示例中，div 的大小是固定的，这会导致图像缩放不稳定，这可能并不理想。
将 cover 的值提供给 background-size 会告诉浏览器调整图像大小，直到它至少填满其容器，必要时裁剪掉额外的位。我的示例中的结果是一系列大小相同的方形图像。

.container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

.bg2 {
  width: 80px;
  height: 80px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-right: 0.5em;
}

<div class="container">
  <div class="bg2" style="background-image: url('https://1.bp.blogspot.com/-1l4T6MDQgqo/WSKvmmZ-KJI/AAAAAAAAAyM/xD2vAPs6JF8pLJl6lhnceuRdKWntNYovACLcB/s1600/9.jpg');"></div>
  <div class="bg2" style="background-image: url('https://worldoffloweringplants.com/wp-content/uploads/2016/05/Gaillardia-Blanket-Flowers.jpg');"></div>
  <div class="bg2" style="background-image: url('https://jeffreyfavero.com/wp-content/uploads/2013/03/JFP-WYO-105.jpg');"></div>
</div>

使用背景尺寸时，如何适合不同尺寸的不同背景图像以采用相同的宽度

1 个答案: