Question

我并排有两个<img>元素（请参见下面的代码和Codepen here）。我想确保将它们调整大小和/或裁剪为完全相同的尺寸-500 x 300-仅使用HTML / CSS（即，不使用Photoshop预处理图像）。另外，随着屏幕宽度的减小，我希望这些尺寸与屏幕宽度成比例地缩小。如何在不将<img>元素替换为CSS background-image的情况下做到这一点？

我知道可能会出现一些裁剪现象，这是可以接受的。

HTML

div {
  border: 1px solid #f76707;
  width: 60%;
}

.d_block {
  display: block;
}

img {
  float: left;
  width: 100%;
}

.container {
  height: auto;
  width: 45%;
  display: inline-block;
}

<div class="d_block">
  <div class="container">
    <img src="https://www.everasia.com/dev/wp-content/uploads/2019/04/2835-m2-Excellent-Sea-View-Land-For-Sale-In-Plai-Laem-06-1170x738-610x385.jpeg">
  </div>
  <div class="container">
    <img src="https://www.everasia.com/dev/wp-content/uploads/2019/04/1300-m2-Of-Premium-Sea-View-Land-For-Sale-In-Plai-Laem-06-610x458.jpg">
  </div>
</div>

如何将图像调整大小/裁剪为相同大小？

0 个答案: