如何修复超出可见屏幕的图像？

Question

图像超出可见屏幕

大家好。

我的 webapp 有这个问题。 我无法修复它。

HTML :

    <div class="modal-wrapper">
    <button class="upload-closer">x</button>
    <div class="uploaded-wrapper">
        <img src="" id="uploaded-photo">
        <button class="upload-changer"><img src="/img/icons/upload-icon.png" alt="Camera"></button>
    </div>
    <div class="modal">
        <img id="upload-icon" src="/img/icons/add-image.png" alt="">
    </div>

社会保障局

.modal-wrapper {
  background-color: $clr-background;
  position: fixed;
  z-index: 999;
  width: 80%;
  height: 40%;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  border: 0.5px solid $clr-primary;
  display: none;
  margin-top: -50px;

  .uploaded-wrapper {
    display: none;
    height: auto;
    max-width: 100%;

    #uploaded-photo {
        height: 100%;
        max-width: 80%;
        padding: 50px;
    }

关于如何解决这个问题的任何想法？

谢谢你。

Answer 1

我建议不要直接放置图像，而是使用图像作为容器的背景，这样它就可以适应最大高度或最大宽度，并且您可以通过 css 控制它，请查看调整 bg 图像的大小

Answer 2

如果没有要检查的页面，我第一次可能不会完全正确，但是您可以首先使用以下内容限制模态的高度

.modal-wrapper{
   max-height:80vh;
} 

和图像相似的东西

#uploaded-photo{
   max-height:70vh;
}  

视口高度或 vh 和视口宽度或 vw 是响应式设计非常有用的单位。 如果您需要帮助，这里有一个可以帮助您入门的链接：
https://css-tricks.com/fun-viewport-units/

Answer 3

你可以用两件事来完成工作

1. 通过使用限制模态的高度

   .modal-wrapper { 最大高度：85vh； 溢出-y：自动； }

2. 将上传的照片高度限制为一定数量

   #uploaded-photo { 高度：75vh; 最大宽度：75vh； 填充：50px； 适合对象：包含； }

无论定义的高度和宽度如何，对象拟合都会保持图像成比例。 https://www.w3schools.com/css/css3_object-fit.asp