我如何使它适合我的页面，因为它看起来很小

Question

我错过了什么它在我的网页上看起来很小我希望它出现在我的整个屏幕上。我找不到我哪里出错了。我希望它适合所有尺寸的个人电脑、电视、4k、笔记本电脑屏幕。 it look something like this

.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、笔记本电脑屏幕。

Answer 1

看来您在 child 上使用的是固定 width: 250px;。 box class。我继续更改 width to 33.33% 以与您当前拥有的三个框对齐。这样它每个 box-column 分成 33.33% 的 100% 标准宽度任何设备。

.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>

我如何使它适合我的页面，因为它看起来很小

how do i make this fit to my page as it look small in size

html

css

size

image