我希望图像保持其正常宽度和高度而不会在全屏浏览器中拉伸。如何做到这一点?

的HTML

<!DOCTYPE html>

  <img id='mountain' src='img/mountains.jpg'>


的CSS

body {
    margin: 0;
    padding: 0;
}

#mountain{
    width: 100%;
    height: 600px;
}

最佳答案

您可以添加此属性。
试试这个,希望它能起作用。
祝好运

#mountain{
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 600px;
    max-height:600px;
}

关于html - 如何使图像在页面调整大小时不会拉伸(stretch),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59513922/

10-12 15:34