我如何使它適合我的頁面，因為它看起來很小-有解無憂

我錯過了什么它在我的網頁中看起來很小我希望它出現在我的整個螢屏上。我找不到我出錯的地方。我希望它適合所有尺寸的電腦、電視、4k、筆記本電腦螢屏。它看起來像這樣

.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 1000px;
    height: 500px;
    display: flex;
}
.container .box{
    position: relative;
    width: 250px;
    height: 500px;
    background: #ccc;
    transition: 0.5s;
}
.container .box:hover{
    transform: scale(1.1);
    z-index: 1;
    box-shadow: 0 5px 20px rgba(0,0,0,1);
}
.container .box .thumb{
    position: absolute;
    width: 100%;
    height: 250px;
    overflow: hidden;
}
.container .box:nth-child(odd) .thumb {
    bottom: 0;
    left: 0;
}
.container .box .thumb img{
    width: 100%;
}
.container .box .details{
    position: absolute;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #262626;
}
.container .box:nth-child(even) .details {
    bottom: 0;
    left: 0;
}
.container .box:nth-child(1) .details {
    background: #65214a;
}
.container .box:nth-child(2) .details {
    background: #fd3f41;
}
.container .box:nth-child(3) .details {
    background: #ffb539;
}
.container .box .details .content{
    position: absolute;
    top: calc(50%   16px);
    transform: translateY(-50%);
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    transition: 0.5s;
}
.container .box:hover .details .content{
    top: calc(50%);
}
.container .box .details .content h3{
    margin: 0;
    padding: 0;
    padding: 10px 0;
    color: #fff;
}
.container .box .details .content a{
    display: inline-block;
    padding: 5px 20px;
    color: #fff;
    border: 2px solid #fff;
    text-decoration: none;
    transition: 0.5s;
    border-radius: 20px;
    transform: scale(0);
}
.container .box:hover .details .content a{
    transform: scale(1);
}
.container .box .details .content a:hover{
    background: #fff;
    color: #262626;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="activity.css">
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="thumb">
                <img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt="">
            </div>
            <div class="details">
                <div class="content">
                    <i class="fa fa-gift" aria-hidden="true"></i>
                    <img src="/images/facebook.png" alt="">
                    <h3>Desert Safari</h3>
                    <a href="#">Read More</a>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="thumb">
                <img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt="">
            </div>
            <div class="details">
                <div class="content">
                    <i class="fa fa-gift" aria-hidden="true"></i>
                    <img src="/images/facebook.png" alt="">
                    <h3>Desert Safari</h3>
                    <a href="#">Read More</a>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="thumb">
                <img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt="">
            </div>
            <div class="details">
                <div class="content">
                    <i class="fa fa-gift" aria-hidden="true"></i>
                    <img src="/images/facebook.png" alt="">
                    <h3>Desert Safari</h3>
                    <a href="#">Read More</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

我錯過了什么它在我的網頁中看起來很小我希望它出現在我的整個螢屏上。我找不到我出錯的地方。我希望它適合所有尺寸的電腦、電視、4k、筆記本電腦螢屏。

uj5u.com熱心網友回復：

看來您width: 250px;在孩子身上使用了固定裝置。的box class。我繼續更改width to 33.33%以與您目前擁有的三個盒子保持一致。通過這種方式，它將每個框列分成任何設備的100% 標準寬度的33.33%。

.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 1000px;
    height: 500px;
    display: flex;
}
.container .box{
    position: relative;
    width: 33.33%; /*Change Applied*/
    height: 500px;
    background: #ccc;
    transition: 0.5s;
}
.container .box:hover{
    transform: scale(1.1);
    z-index: 1;
    box-shadow: 0 5px 20px rgba(0,0,0,1);
}
.container .box .thumb{
    position: absolute;
    width: 100%;
    height: 250px;
    overflow: hidden;
}
.container .box:nth-child(odd) .thumb {
    bottom: 0;
    left: 0;
}
.container .box .thumb img{
    width: 100%;
}
.container .box .details{
    position: absolute;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #262626;
}
.container .box:nth-child(even) .details {
    bottom: 0;
    left: 0;
}
.container .box:nth-child(1) .details {
    background: #65214a;
}
.container .box:nth-child(2) .details {
    background: #fd3f41;
}
.container .box:nth-child(3) .details {
    background: #ffb539;
}
.container .box .details .content{
    position: absolute;
    top: calc(50%   16px);
    transform: translateY(-50%);
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    transition: 0.5s;
}
.container .box:hover .details .content{
    top: calc(50%);
}
.container .box .details .content h3{
    margin: 0;
    padding: 0;
    padding: 10px 0;
    color: #fff;
}
.container .box .details .content a{
    display: inline-block;
    padding: 5px 20px;
    color: #fff;
    border: 2px solid #fff;
    text-decoration: none;
    transition: 0.5s;
    border-radius: 20px;
    transform: scale(0);
}
.container .box:hover .details .content a{
    transform: scale(1);
}
.container .box .details .content a:hover{
    background: #fff;
    color: #262626;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="activity.css">
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="thumb">
                <img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt="">
            </div>
            <div class="details">
                <div class="content">
                    <i class="fa fa-gift" aria-hidden="true"></i>
                    <img src="/images/facebook.png" alt="">
                    <h3>Desert Safari</h3>
                    <a href="#">Read More</a>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="thumb">
                <img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt="">
            </div>
            <div class="details">
                <div class="content">
                    <i class="fa fa-gift" aria-hidden="true"></i>
                    <img src="/images/facebook.png" alt="">
                    <h3>Desert Safari</h3>
                    <a href="#">Read More</a>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="thumb">
                <img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt="">
            </div>
            <div class="details">
                <div class="content">
                    <i class="fa fa-gift" aria-hidden="true"></i>
                    <img src="/images/facebook.png" alt="">
                    <h3>Desert Safari</h3>
                    <a href="#">Read More</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/342496.html

標籤：html css 图片尺寸

上一篇：從影像張量復制片段

下一篇：如何在Azure門戶中為AzureLinuxFunctions使用自定義映像？