Question

我需要一些代码的帮助，我试图使图像基本上放大240px到240px div，我不知道究竟如何解释它，但基本上图像需要放大，只有在一个方形区域。

这里的第一个很好，不需要改变任何东西，但是第二个不适合整个方块，因为它太小了。

    <!-- 2 --><a class="wsb-media-carousel-wrapper img_rounded_corners" rel="wsb-media-carousel-desktop" href="productimg/bowk-inside.jfif" data-fancybox-type="image" style="height: 240px; width: 240px; margin: 20px; display: inline-block; vertical-align: middle;"><img src="productimg/bowl-inside.jfif" style="width: 240px; top: -39.2138px;"></a>

这是它的外观：我希望第二个看起来像第二个没有实际调整代码的图像。我从另一个网站获得了这个代码，但无法弄清楚它们是如何使它适合的。

我的网站：my website 他们的网站：their website

Answer 1

样式属性>>> dictify(["one","two","three","four"]) {'one': {'two': {'three': {'four': None}}}}指定如何将图像等元素放在其容器内。您可以在https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

了解相关信息

我在一系列图片上创建了object-fit设置为object-fit的基本示例，以创建您正在寻找的效果。

cover

img {
  width: 240px;
  height: 240px;
  object-fit: cover;
  border-radius: 20px;
}

img.orig {
  object-fit: initial;
  height: auto;
}

试图放大240 * 240 div内的图像

1 个答案: