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

Question

我有一些不同的图片，我需要使它们在我网站的一行中的尺寸相匹配。有三张图片，我希望它们在该行中占据相等的空间。不幸的是，每张图片的尺寸都大不相同，我该如何让它们与 CSS 相匹配呢？或者我需要为此学习 JavaScript 吗？

Answer 1

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

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>