Html 多屏幕图像响应_Html_Css

Html 多屏幕图像响应

html css

Html 多屏幕图像响应,html,css,Html,Css,我一直在使用bootstrap，试图让我的网页的这一部分在缩小网页的同时正确显示图像。他们保持一致，这是好的，似乎列/行方法与引导真的来了；我怎样才能使这些内容随着页面的缩小而缩小，以便它们在信息中停留的时间更长，并且在网页显著缩小时整体看起来更好风格 h1 { font-weight: bold; font-size: 40px; background-color: #4aaaa5; padding: 15px; color: #ffffff !imp

我一直在使用bootstrap，试图让我的网页的这一部分在缩小网页的同时正确显示图像。他们保持一致，这是好的，似乎列/行方法与引导真的来了；我怎样才能使这些内容随着页面的缩小而缩小，以便它们在信息中停留的时间更长，并且在网页显著缩小时整体看起来更好

风格

h1 {
    font-weight: bold;
    font-size: 40px;
    background-color: #4aaaa5;
    padding: 15px;
    color: #ffffff !important;
}
h2 {
    font-size: 25px;
    Color: #4aaaa5;
    padding: 20px 20px 5px 20px;
}
#foot {
    border-style: solid;
    border-width: 10px 0px 0px 0px;
    border-color: #4aaaa5;
    padding-top: 20px;
    color: #cccccc;
    background-color: #666666;
    text-align: center;
    margin-top: auto;
}
.left {
    display: inline-block;
    position: relative;
    padding: 0px;
    margin: 20px;
}
h3{
    position: absolute;
    bottom: 5px;
    font-size: 25px;
    background-color: #4aaaa5;
    padding: 15px 0px;
    width: 100%;
    color: #ffffff;
    text-align: center;
}
body {
    background-image: url("./hotel-wallpaper/hotel-wallpaper.png");
    display: flex;
    height: 100vh;
    flex-direction: column;
}
.main{
    display: block;
    margin-top: 50px;
    margin-bottom: 150px;
    padding: 20px 20px 40px 20px;
    background-color: #ffffff;
} 
.borderr {
    border-right: 2px solid #cccccc;
}
hr {
    margin: 20px 0px 20px 0;
    height: 1px;
    border: 0px;
    border-top: 3px solid #cccccc;
}
p {
    margin-top: 20px;
    line-height: 30px;
}

html

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" type="text/css" href="./assets/reset.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="./assets/Style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <title>Document</title>
</head>



<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container col-xl-7 col-lg-8 col-md-9 col-sm-10">
                <h1 class="navbar-brand"> My Name </h1>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item borderr">
                            <a class="nav-link" href="./index.html"> About me <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item active borderr">
                            <a class="nav-link" href="./portfolio.html">Portfolio</a>
                        </li>
                        <li class="nav-nav-link">
                            <a class="nav-link" href="./contact.html">
                                Contact
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <main>
        <div class="main container col-xl-7 col-lg-8 col-md-9 col-sm-10">
            <h2> Portfolio </h2>
            <hr>
            <div class="row">
                <div class="left">
                    <img src="https://www.peta.org/wp-content/uploads/2017/05/Kenny-4-602x399.jpg" alt="White Liger" width="100%" height="100%"
                        style="max-width: 300px; max-height: 200px;">
                    <h3> liger </h3>
                </div>
                <div class="left">
                    <img src="https://twistedsifter.files.wordpress.com/2012/01/savannah_cat_closeup.jpg?w=800&h=507&zoom=2"
                        alt="Savannah" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
                    <h3>Savannah</h3>
                </div>
                <div class="left">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/XJ-B1_Beefalo.jpg/1920px-XJ-B1_Beefalo.jpg"
                        alt="Beefalo" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
                    <h3> Beefalo </h3>
                </div>
                <div class="left">
                    <div class="pic">
                        <img src="https://shoeuntied.files.wordpress.com/2017/12/rama2.jpg" alt="Cama" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
                        <h3>Lama camel</h3>
                    </div>
                </div>
                <div class="left">
                    <img src="https://i0.wp.com/metro.co.uk/wp-content/uploads/2018/11/sei_38307333-0b17.jpg?quality=90&strip=all&zoom=1&resize=644%2C471&ssl=1"
                        alt="Zonkey" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
                    <h3> Zonkey</h3>
                </div>

            </div>
        </div>
    </main>
    <footer id="foot">

        Copyright &copy;

    </footer>

</body>

</html>


文件
我的名字








文件夹

利格尔
稀树草原
比法罗
喇嘛驼
宗基
版权及副本；

感谢-

使用Col md-（媒体相关长度）设置行div长度，图像宽度为100%

将class=“img fluid”添加到图像标签中，如下所示：

<img class="img-fluid">

这将使图像响应，从而根据窗口大小缩小和扩展。此外，根据您的代码设置最大高度和最大宽度将修复最大尺寸

但在缩小窗口大小的同时，它会缩小窗口的大小

关于图像，请参阅bootstrap的官方文档

将class=“img fluid”添加到图像标签中，如下所示：

<img class="img-fluid">

这将使图像响应，从而根据窗口大小缩小和扩展。此外，根据您的代码设置最大高度和最大宽度将修复最大尺寸

但在缩小窗口大小的同时，它会缩小窗口的大小

关于图像，请参阅bootstrap的官方文档

建议：避免直接在html标记上编写CSS。创建新类并编写css。建议：避免直接在html标记上编写css。创建新类并编写css。