CSS 图像 max-height 不保持纵横比-解网

问：

我有一个弹出式模态，它有一个固定的位置，宽度和高度为 100%。

模态中的内容具有和max-width: 90%;max-height: 90%

图像也具有这些值，但问题是它在更改高度时不保持纵横比，但在更改宽度时保持纵横比。（视频解释了这一切）

#popup {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  bottom: 0;
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.popupModal {
  max-width: 90%;
  max-height: 90%;
  background: linear-gradient(0deg, #fff, #f0f0f0);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateY(-100px);
  transition: transform 0.5s;
}

.closeBtn {
  position: absolute;
  top: -25px;
  right: -25px;
  border-radius: 50%;
  background-color: #fff;
  font-size: 24px;
  font-weight: bold;
  color: $blue-dark;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-box-shadow: 0 0 27px -10px rgba(0, 0, 0, 0.95);
  -moz-box-shadow: 0 0 27px -10px rgba(0, 0, 0, 0.95);
  box-shadow: 0 0 27px -10px rgba(0, 0, 0, 0.95);
  transition: box-shadow 0.2s ease;
}

.closeLine {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: #072742;
  height: 4px;
  width: 50%;
}

#closeLineOne {
  transform: rotate(45deg);
}

#closeLineTwo {
  transform: rotate(135deg);
}

.closeLine:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.popupActive {
  opacity: 1;
  z-index: 5000;
  transition: z-index 0s 0s, opacity 0.5s 0s;
}

.popupModal {
  transform: translateY(0);
}

.metalModal {
  height: 80%;
  background: transparent;
}

.metalPopup {
  display: flex;
  flex-direction: column;
  // It works if I change the max-height to height, but it then stretches out all other images.
  max-height: 100%;
  max-width: 100%;
  position: relative;
}

.metalImg {
  max-width: 100%;
  flex: 1;
  object-fit: cover;
  max-height: 100%;
  width: auto;
  height: auto;
}

.metalName {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: white;
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.75);
  position: absolute;
  bottom: 0;
  left: 0;
}

<div id="popup" class="popupActive">
  <div class="popupModal metalModal">
    <div class="metalPopup">
      <div class="closeBtn">
        <span id="closeLineOne" class="closeLine"></span>
        <span id="closeLineTwo" class="closeLine"></span>
      </div>
      <img src="https://i.imgur.com/BeWSEDB.jpg" class="metalImg" />
      <div class="metalName">
        Metal name
      </div>
    </div>
  </div>
</div>

编辑：

当我给类时，图像保持纵横比。但它使宽度保持为原始宽度，即使图像是整个块的一小部分。.metalPopupdisplay: blockimg

^ 请看这里。

HTML CSS格式

0赞 T J 3/15/2021

尝试在widthheightauto%

答：

-1赞 Mirronelli 3/15/2021 #1

这个怎么样。它对你有用吗？

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

0赞 HenrijsS 3/15/2021

它已经具有这些值。高度根据宽度重新缩放，但反之则不然，

2赞 Tonic 4/9/2021 #2

如果您设置高度，通常最好将宽度设置为自动，反之亦然。

.yourclass {
max-height: 90%;
max-width: (either unset or auto)
}

0赞 HenrijsS 4/9/2021

我通常遵循这个准则，但自从这个问题以来，我已经将其添加到使用它的每个元素中。

0赞 Tonic 4/9/2021

如果不是，你介意在这里更新代码吗？所以我可以玩弄它并进一步帮助你

0赞 HenrijsS 4/9/2021

是的。没有太大变化，因为我仍然希望这个问题能得到回答。但这是我拥有的最新代码。我现在正在修补它。

0赞 Tonic 4/9/2021

好的，我为它所做的只是给出 .popupmodal max-width： 90%;max-height：自动;

3赞 HenrijsS 4/9/2021 #3

所以我只是将 max-height 更改为 just，它现在似乎可以工作并且不会拉伸图像，因为 now 具有 max-height 可以删除（这是现在，因为如果我愿意，它不会响应模式居中，但仍然可以添加到相对定位并减去它的高度）。.metalPopupheight: 100%;.metalImg.metalNameposition: relative

#popup {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  bottom: 0;
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.popupModal {
  max-width: 90%;
  max-height: 90%;
  background: linear-gradient(0deg, #fff, #f0f0f0);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateY(-100px);
  transition: transform 0.5s;
}

.closeBtn {
  position: relative;
  top: 25px;
  margin: 0 0 0 auto;
  right: -25px;
  border-radius: 50%;
  background-color: #fff;
  font-size: 24px;
  font-weight: bold;
  color: $blue-dark;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-box-shadow: 0 0 27px -10px rgba(0, 0, 0, 0.95);
  -moz-box-shadow: 0 0 27px -10px rgba(0, 0, 0, 0.95);
  box-shadow: 0 0 27px -10px rgba(0, 0, 0, 0.95);
  transition: box-shadow 0.2s ease;
}

.closeLine {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: #072742;
  height: 4px;
  width: 50%;
}

#closeLineOne {
  transform: rotate(45deg);
}

#closeLineTwo {
  transform: rotate(135deg);
}

.closeLine:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.popupActive {
  opacity: 1;
  z-index: 5000;
  transition: z-index 0s 0s, opacity 0.5s 0s;
}

.popupModal {
  transform: translateY(0);
}

.metalModal {
  height: 80%;
  background: transparent;
}

.metalPopup {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 100%;
  position: relative;
}

.metalImg {
  max-width: 100%;
  object-fit: cover;
  max-height: calc(100% - 130px);
}

.metalName {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: white;
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.75);
}

<div id="popup" class="popupActive">
  <div class="popupModal metalModal">
    <div class="metalPopup">
      <div class="closeBtn">
        <span id="closeLineOne" class="closeLine"></span>
        <span id="closeLineTwo" class="closeLine"></span>
      </div>
      <img src="https://i.imgur.com/BeWSEDB.jpg" class="metalImg" />
      <div class="metalName">
        Metal name
      </div>
    </div>
  </div>
</div>

1赞 PaulProgrammer 4/15/2021

正如他们所说，给猫剥皮的方法不止一种。我喜欢在我的CSS中达到这种效果。object-fit: cover

1赞 Abhay Singh 4/16/2021 #4

您可以在 CSS 中使用纵横比来保持视频的特定比例。

video {
   width: 90%;
   aspect-ratio: 16/9 ; // due to this video will maintain aspect ratio of 16/9
}

几乎所有现代浏览器都支持这一点，这将使您编写更少的代码。

1赞 HenrijsS 4/16/2021

纵横比很好，但它仅适用于具有特定纵横比的静态图像。就我而言，有 50-60 张图像，它们的大小都完全不同。

上一个：GCP 云终端不会将文件写入我的 Windows 文件系统

下一个：将两个数组合并为多个对象

CSS 图像 max-height 不保持纵横比

CSS image max-height doesn't keep aspect ratio

评论

评论

评论

评论

评论