主页 / 问题 / 779244
Accepted
E1mir
Asked:2020-02-02 19:51:50 +0000 UTC2020-02-02 19:51:50 +0000 UTC

如何在不改变纵横比的情况下调整图像大小？

  • 772

图像有以下 4x3 帧：

.image {
  width: 100%;
}

.image .image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e7e7e7;
  padding: 2px;
  border-radius: 2px;
}

.image .image-wrapper.service {
  margin: 5px auto;
  height: 180px;
  width: 240px;
}

.image .image-wrapper img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
<div class="image">
  <div class="image-wrapper service">
    <img src="//via.placeholder.com/100x200" />
  </div>
</div>
<div class="image">
  <div class="image-wrapper service">
    <img src="//via.placeholder.com/100x100" />
  </div>
</div>
<div class="image">
  <div class="image-wrapper service">
    <img src="//via.placeholder.com/200x100" />
  </div>
</div>

但是这里的情况是，如果图像较小，则居中，如果图像较大，则调整为比例。

如何在不改变纵横比的情况下使框架内的小图像增长并适合给定 4x3 框架的大小？

html

2 个回答

  1. Best Answer

    您需要为图像设置块的宽度和高度，然后为它们的背景设置行为。

    .image .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

    并且不要忘记为容器提供正确的尺寸。

    • 2

  2. 挂了:hover放大镜。

    .image {
  width: 100%;
}

.image .image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e7e7e7;
  padding: 2px;
  border-radius: 2px;
}

.image .image-wrapper.service {
  margin: 5px auto;
  height: 180px;
  width: 240px;
}

.image .image-wrapper img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.image-wrapper {
  overflow: hidden;
}

.image-wrapper img {
  transition: .2s;
}

.image-wrapper:hover img {
  transform: scale(2);
}
    <div class="image">
  <div class="image-wrapper service">
    <img src="//via.placeholder.com/100x200" />
  </div>
</div>
<div class="image">
  <div class="image-wrapper service">
    <img src="//via.placeholder.com/100x100" />
  </div>
</div>
<div class="image">
  <div class="image-wrapper service">
    <img src="//via.placeholder.com/200x100" />
  </div>
</div>

    • 0

相关问题