Question

我有一些不同的图片，我需要让它们在我网站的一行中的尺寸匹配。有三个图像，我希望它们占据该行的相等空间。不幸的是，每个图像的大小都截然不同，我如何才能使它们与CSS匹配？或者我需要进入JavaScript吗？

Answer 1

使用background-size: cover并将每个图像作为元素的背景。您可以使用flex或网格水平定位容器。浮动仅用于演示目的。

＆＃13;

.image {
  float: left;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 200px;
  height: 120px;
}

.bg1 {
  background-image: url(http://www.sftravel.com/sites/sftraveldev.prod.acquia-sites.com/files/styles/sft_390x675_dark/public/alternative-portraits/Skyline-San-Francisco-at-Dusk_2.jpg?itok=FTSuT4Sf&timestamp=1515701696);
}

.bg2 {
  background-image: url(https://lonelyplanetimages.imgix.net/a/g/hi/t/9cf024dfd5c0bcb2b17f4785340145ea-san-francisco.jpg?sharp=10&vib=20&w=2000);
}

.bg3 {
  background-image: url(http://static4.uk.businessinsider.com/image/5ac39fa97708e9798137d136-1000/shutterstock566076799.jpg);
}

＆＃13;

<div class="row">
  <div class="image bg1">
  
  </div>
  <div class="image bg2">
  
  </div>
  <div class="image bg3">
  
  </div>
</div>

＆＃13;

Answer 2

你可以强有力地改变屏幕上占据的高度/宽度，但你不能用CSS改变它们的宽高比，我很害怕。

为了使它们实际上完全适合相同的空间，您必须从中间剪切具有固定尺寸（高度/宽度）的缩略图，并将它们放置在您的网站中而不是原始图像中。

如何调整图像大小以使它们与CSS完美匹配？

2 个答案: