Question

我正在开发一种离子应用程序，并且我想在某些卡片中显示一些图像，问题是我的图像尺寸不大，我希望它们看起来有些。

想法是使用àcss类来解决问题（至少在宽度上）

.full-width-image {
width: 100%
}

此类将解决尺寸问题，并且所有图像均具有一定的宽度。我怎么不知道如何为他们所有人定一个固定的高度。如果我将css类添加到固定高度，例如：

.full-width-image {
width: 100%;
height: 60px; 
}

一些图片看起来很难看： how it looks like

我想要隐藏图像的多余部分。

Answer 1

如果您设置了宽度和高度，则可以使用object-fit: cover;来使图像填充整个空间，而不会失去其宽高比。

Answer 2

我建议您在图像周围使用弹性包装纸。

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 2px gray;
  width: 100px;
  height: 100px;
  overflow: hidden;
  margin: 1em;
}

.wrapper img {
  border: 1px solid black;
  max-width: 100%;
  max-height: 100%;
}

.example {
  display: flex;
}

<div class="example">

<div class="wrapper">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>

<div class="wrapper">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
</div>

<div class="wrapper">
  <img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg">
</div>

<div>

使用此技术，您会获得一种智能图像-它可以自动缩放以适合您的包装纸，并具有固定的尺寸，但不会变形。看，图像周围有黑色边框，因此您可以看到宽度>高度的图像和高度>宽度的树型图像都很好地适合包装纸，并相应地限制了宽度和高度。

也可以在包装器类中使用inline-flex而不是flex。

如何使用CSS调整HTML中的图像大小

2 个答案: