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

【问题标题】：how do i make this fit to my page as it look small in size我如何使它适合我的页面，因为它看起来很小
【发布时间】：2021-10-28 11:29:51
【问题描述】：

我错过了什么，它在我的网页中看起来很小，我希望它出现在我的整个屏幕上。我找不到哪里出错了。我希望它适合所有尺寸的电脑、电视、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、笔记本电脑屏幕。

【问题讨论】：

标签： html css image size

【解决方案1】：

您的孩子似乎使用了固定的width: 250px;。 box class。我继续更改width to 33.33% 以与您当前拥有的三个框对齐。这样，它就可以将每个 box-column 拆分为任何设备 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>

【讨论】：

如果你能告诉我如何为每个容器添加链接，这将是有帮助的，我不想链接阅读更多我想要整个盒子
@MSameerAsif 您可以将锚标签 <a href="#"></a> 包裹在您的 <div class="details"> 周围，如下所示：<a href="#"><div class="details"></a> 以及您的 img 周围。 <a href="#"><img src="/images/facebook.png" alt=""></a> 因为在每 1/3 的内容中有两个单独的子容器，您必须单独链接它们，但如果您给它们相同的链接，它的作用相同。