Question

我已经搜索了与该问题有关的堆栈溢出的一些问题，但是该解决方案无效。

我已经创建了一行图像，并且希望这些图像具有相同的大小。

我的代码：

img {
  width: 100%;
  height: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.products-row {
  grid-template-columns: repeat(4, 1fr);
}

<div class="grid products-row row">
  <div><img src="https://article.images.consumerreports.org/prod/content/dam/CRO%20Images%202019/Magazine/04April/CR-Cars-InlineHero-ComingSoon-Toyota-Supra-2-19">
  </div>

  <div><img src="https://media.wired.com/photos/5aa18e3edc9df6500b90747b/master/pass/CarRoundup-Mclaren.jpg"></div>

  <div><img src="https://www.autocar.co.uk/sites/autocar.co.uk/files/styles/body-image/public/911-road-3629a.jpg?itok=m6x23Go0"></div>

  <div><img src="https://cdn2.carbuyer.co.uk/sites/carbuyer_d7/files/2017/12/lamborghini-urus-8_1.jpg">
  </div>
</div>

Answer 1

我相信您可以通过输入高度和宽度值来设置分辨率。它对我有用。

    img {

  width: 500px;
  height: 350px;
}
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
}

.products-row {

    grid-template-columns: repeat(4, 1fr);
 }

So then you should end up with something like this

Answer 2

您的图像具有不同的比率，因此，如果它们具有相同的宽度，则永远不会具有相同的高度。我的建议：将高度设置为固定值，并将宽度设置为自动。请参阅下面的链接。

https://codepen.io/Darthlegos/pen/eazxjy

img {
  width: auto;
  height: 100px;
}

Answer 3

在您的情况下，应切换为将EventBusServiceBus设置为容器，而不要使用图片标签

这将帮助您保持图像的宽高比，尽管宽度可用。

https://jsfiddle.net/saksham_malhotra/46zutfjm/?utm_source=website&utm_medium=embed&utm_campaign=46zutfjm处的样品

请记住，将每个容器的高度设置为所有图像高度的最小值。

Answer 4

根据您的意思，“相同大小”可以是相对相对的。为了说明我的意思，我创建了一个示例应用程序，其中显示了object-fit样式属性的不同用法。在此示例中：

填充图片的宽度和高度相同
包含的高度相同（因为包含图像的div宽于高）
盖子的宽度和高度相同，但会放大图像，使它们充满空间并聚焦在中心

我还添加了所有其他对象适合选项，因此您可以看到所有选项之间的差异，而不仅仅是填充空白。

我希望交互式演示可以帮助您确定所需的内容！

法律免责声明：我不主张这里使用的任何图像的所有权...我只是通过搜索引擎找到它们并根据尺寸使用它们。

/// Changes the object-fit style when a radio button is clicked
function onChange(e) {
  let imgs = document.getElementsByTagName("IMG");
  for (let img of imgs) {
    img.style.objectFit = e.target.value;
  }
}

/// Generate the render buttons because I'm lazy
function renderRadioButtons() {
  let optionsDiv = document.getElementsByClassName("objectFitOptions")[0];
  for (let cssValue of [null, 'fill', 'contain', 'cover', 'none', 'scale-down']) {
    let label = document.createElement('label');
    let radio = document.createElement('input');{
    radio.setAttribute('type', 'radio');
    radio.setAttribute('name', 'object-fit');
    radio.setAttribute('value', cssValue);
    radio.onclick=onChange;
    }
    let span = document.createElement('span');
    {
      span.innerText = cssValue || 'Unset';
    }
    label.appendChild(radio);
    label.appendChild(span);
    optionsDiv.appendChild(label);
  }
}

// Onload preform renders
renderRadioButtons();

.image-row {
  display: flex;
  height: 200px;
}

.image-row > * {
  flex: 1 1 0px;
  min-height: 0px;
  min-width: 0px;
}

img {
  height: 100%;
  width: 100%;
  object-fit: default;
}

<div class="objectFitOptions">
</div>
<div>
  <div>
    Small images
  </div>
  <div class="image-row">
    <div>
      <img src="https://object.cato.org/sites/cato.org/files/ra-icons/icon-regulatory.png" />
    </div>
    <div>
      <img src="https://clearlawinstitute.com/wpcli/wp-content/uploads/2014/07/icon-investigation.png" />
    </div>
  </div>
</div>
<div>
  <div>
    Tall images
  </div>
  <div class="image-row">
    <div>
      <img src="https://thumbs.dreamstime.com/z/tall-beech-tree-spring-moving-foliage-42826766.jpg" />
    </div>
    <div>
      <img src="https://clipground.com/images/tall-clipart-4.jpg" />
    </div>
  </div>
</div>
<div>
  <div>
    Wide images
  </div>
  <div class="image-row">
    <div>
      <img src="https://photography-cameras.org/images/stories/wide-angle-lens.jpg" />
    </div>
    <div>
      <img src="https://hdqwalls.com/wallpapers/new-york-city-wide-8k-2z.jpg" />
    </div>
  </div>
</div>

如何制作相同大小的图像

4 个答案: