html - 如何调整图像大小，以便它们与CSS完美匹配？

我有一些不同的图片，我需要使它们的尺寸在我的网站上连续匹配。一共有三张图片，我希望它们在该行中占据相等的空间。不幸的是，每个图像的大小都大不相同，如何使它们与CSS匹配？还是我需要为此使用JavaScript？

最佳答案

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

https://jsfiddle.net/170q0vwL/

.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);
}

<div class="row">
  <div class="image bg1">

  </div>
  <div class="image bg2">

  </div>
  <div class="image bg3">

  </div>
</div>

关于html - 如何调整图像大小，以便它们与CSS完美匹配？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50611861/