时间戳

首页 > 解决方案 > 响应式布局：Safari 上的拉伸图像

html - 响应式布局：Safari 上的拉伸图像

问题描述

这是我的布局。

期望的行为是，当我垂直调整窗口大小时，图像缩放保持原始纵横比。

我的代码在除 Safari 之外的所有浏览器中都运行良好（您可以通过在不同浏览器中尝试该代码段来查看它）。

你有解决方案吗？谢谢 ;）

.wrap-container{
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: yellow;
  height: 55vh;
}

.wrap{
  width: 700px;
  background-color: aqua;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding-top: 64px;
}

.wrap img{
    height: 100%;
    width: auto;
    max-width: 300px;
    max-height: 300px;
}
<div class="wrap-container">
  <div class="wrap">
    <img src="https://via.placeholder.com/300"/>
  </div>
</div>

标签： htmlcssimagescaleresponsive

解决方案

flex: 0;在图像上添加

.wrap-container{
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: yellow;
  height: 55vh;
}

.wrap{
  width: 700px;
  background-color: aqua;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding-top: 64px;
}

.wrap img{
    height: 100%;
    width: auto;
    flex: 0;
    max-width: 300px;
    max-height: 300px;
}
<div class="wrap-container">
  <div class="wrap">
    <img src="https://via.placeholder.com/300"/>
  </div>
</div>

推荐阅读