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

Question

图像超出可见屏幕

大家好。

我的网络应用程序有这个问题。我无法修复它。

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>

SCSS

.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 来控制它，检查一下 Resizing bg image

Answer 2

如果没有要检查的页面，我第一次可能无法完全正确，但您可以从限制模态框的高度开始，例如

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

以及与图片类似的内容

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

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

Answer 3

您可以使用 2 件事来完成工作

使用
限制模态框的高度
.模态包装器{ 最大高度：85vh；溢出-y：自动； }
限制上传的照片高度为一定数量

#上传照片{ 身高：75vh；最大宽度：75vh；填充：50px；适合对象：包含； }

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

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

How can I fix an image break out of the visible screen?

html

css

sass

responsive-design