HTML + CSS - 图片到处都是奇怪的拉伸，除了 Firefox答案

【问题标题】：HTML + CSS - Picture is strangely streched everywhere, except FirefoxHTML + CSS - 图片到处都是奇怪的拉伸，除了 Firefox
【发布时间】：2020-09-01 12:09:01
【问题描述】：

我的前端 HTML + CSS 代码有一个奇怪的问题。一个居中的图像到处都被奇怪地拉伸了——Chrome、Safari、IE 其他……除了 Firefox。下面是它的一些图像和代码。我是前端编程的新手，所以 IDK 该怎么做。它也应该是完全响应的。怎么了？

感谢任何提示:)

火狐： 其他：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="botstyle.css">
    <meta charset="UTF-8">
    <title>CrazyBot Home</title>
</head>
<script type="text/javascript">

    function checkForm()
    {
        if(document.getElementById('input').value == 'hello'){
            window.location.replace("https://www.google.com");
            alert('Correct Password!');

        }else {
            alert('Wrong Password!');
            return false;
        }
    }

</script>
<body>
    <div class="container">
        <p class="container">
        <img src="assets/bot1.png" alt="lol">
        <p style="text-align: center">

        <div class="Wrapper">

            <div class="Input">
                <span>Enter closed beta access code:</span>
                <form method="post" onsubmit="return checkForm(); return true;">
                    <input type="text" id="input" class="Input-text" placeholder="Beta code">
                </form>
            </div>
        </div>
        </p>
        </p>

    </div>


</body>

</html>

CSS：

body {
    background-image: url("assets/background1.jpg");
    background-color: #000000;
    font-family: Verdana;
}

.container {
    -ms-interpolation-mode: bicubic;
    min-width: 100px;
    min-height: 100px;
    max-width: 500px;
    max-height: 275px;
    width: auto;
    height: auto;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
}

【问题讨论】：

标签： html css image frontend

【解决方案1】：

必须在您的 css 样式表中使 img 具有响应性。

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

【讨论】：

【解决方案2】：

尝试将以下 css 赋予图像，看看它是否得到解决，否则请上传一个工作演示，以便我们可以更好地帮助您。

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

【讨论】：