Question

给出HTML代码段

<div class="swiper-slide">
  <div layout="row" layout-align="start stretch" flex style="height: 100%;">
    <div layout="row" layout-align="center center" flex="grow">
      <img src="/media/{{mediaId}}/h/1440">
    </div>
  </div>
</div>

和CSS一样

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

图像的确保持居中并且不会超出其父容器，但是在调整组件大小时，它会水平拉伸或收缩。是否可以说图像元素应保留显示图像的长宽比？

Answer 1

将图像显示为容器块的背景，可以根据需要进行拉伸。

类似这样的东西：

<div class="swiper-slide">
  <div layout="row" layout-align="start stretch" flex style="height: 100%;">
    <div layout="row" layout-align="center center" flex="grow">
      <div 
        class="img-container" 
        style="background-image: url(/media/{{mediaId}}/h/1440)"
      >
      </div>
    </div>
  </div>
</div>

CSS：

.img-container {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

通过这种方式，您可以确保图像不会仅在一个方向上拉伸，使其看起来偏斜，而是保持比例。

Answer 2

在最大高度上使用stretch，它在旧的浏览器中将不起作用，您必须为这些浏览器做一些骇客的CSS。

img {
  display: block;
  max-width: 100%;
  max-height: -webkit-fill-available;
  max-height: -moz-available;
  max-height: fill-available;
  border: 1px solid blue;
}

.container {
  border: 1px solid red;
  width: 300px;
  height: 300px;
  padding: 5px;
  margin-bottom: 20px;
}

<div class="container"><img src="https://cdn.vox-cdn.com/thumbor/LjOG9-WQDquskHMvYG32ADEaDm4=/0x0:2040x1360/920x613/filters:focal(857x517:1183x843):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/57358643/jbareham_170504_1691_0020.0.0.jpg" /></div>

<div class="container"><img src="https://designyoutrust.com/wp-content/uploads/2018/06/0-24.jpg" /></div>

使用CSS

2 个答案: