Question

我正在制作一个带有x10Host的小型项目学校网站，我正在编写自己的自定义HTML。首页将有一个小图像来解释我是谁以及我做了什么。这是图像：

当我使用以下HTML和CSS时，它会完美显示（图像显示）：

HTML 的

<div class="jumbotron">
    <img src="Jumbotron.png"></img>
</div>

CSS

.jumbotron{
    position:relative;
    min-width:100%;
    min-height:100%;
    top:-50px;
    left:-50px;
}
.jumbotron img{
    min-width:100%;
    min-height:100%;
}

它完美地显示出来：

我遇到的唯一问题是当我调整窗口大小时。目前，窗口是1080p。如果我调整大小，就会发生这种情况：

我有什么方法可以修改HTML或CSS以使图像调整大小到客户端的屏幕？如果您想查看完整的HTML代码，则该网站为http://mrsquer.x10Host.com/。

Answer 1

.jumbotron{
            margin-left:-10px;
            margin-top:-10px;
            height:100%;
            min-width:100%;
            position:absolute;    
        }
        .jumbotron img{
            height:100%;
            width:100%;
            max-width:100%;
        }

尝试使用css

Answer 2

您需要设置max-width: 100%; height:100%;以将其限制为容器的宽度，但保持最大图像高度。

Answer 3

            <!doctype html>
            <html>
            <title>css testing</title>
            <style type = "text/css">
                .jumbotron
                {
                    position:relative;
                    width:100%;
                                            max-width: 100%;
                    height:100%;
                }

                .jumbotron img
                {
                    width:100%;
                    height: auto;
                }
            </style>

            </head>
            <body>
                <div class="jumbotron">
                    <img src="Jumbotron.png"></img>
                </div>
            </body>
            </html>

img height必须设置为＆＃39; auto＆＃39;或者它无法正确缩放（如上面的代码所示）。

这适用于任何尺寸的屏幕，但我不会使用它。

将img设置为背景可以让您更自由地添加内容。并且

height: 100%;

除非您希望整个屏幕占用容器div。

，否则不需要

如果你想要一个DIY网站，可以阅读基本的HTML和CSS。玩得开心！

如何通过屏幕调整Jumbotron img的大小？

3 个答案: