#html #css #image #size
Вопрос:
чего мне не хватает, это выглядит маленьким на моей веб-странице, я хочу, чтобы это было на всем моем экране. я не могу понять, где я ошибаюсь. я хочу,чтобы это соответствовало всем размерам ПК,телевизора,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; } lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;titlegt;Documentlt;/titlegt; lt;link rel="stylesheet" href="activity.css"gt; lt;/headgt; lt;bodygt; lt;div class="container"gt; lt;div class="box"gt; lt;div class="thumb"gt; lt;img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt=""gt; lt;/divgt; lt;div class="details"gt; lt;div class="content"gt; lt;i class="fa fa-gift" aria-hidden="true"gt;lt;/igt; lt;img src="/images/facebook.png" alt=""gt; lt;h3gt;Desert Safarilt;/h3gt; lt;a href="#"gt;Read Morelt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; lt;div class="box"gt; lt;div class="thumb"gt; lt;img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt=""gt; lt;/divgt; lt;div class="details"gt; lt;div class="content"gt; lt;i class="fa fa-gift" aria-hidden="true"gt;lt;/igt; lt;img src="/images/facebook.png" alt=""gt; lt;h3gt;Desert Safarilt;/h3gt; lt;a href="#"gt;Read Morelt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; lt;div class="box"gt; lt;div class="thumb"gt; lt;img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt=""gt; lt;/divgt; lt;div class="details"gt; lt;div class="content"gt; lt;i class="fa fa-gift" aria-hidden="true"gt;lt;/igt; lt;img src="/images/facebook.png" alt=""gt; lt;h3gt;Desert Safarilt;/h3gt; lt;a href="#"gt;Read Morelt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; чего мне не хватает, это выглядит маленьким на моей веб-странице, я хочу, чтобы это было на всем моем экране. я не могу понять, где я ошибаюсь. я хочу,чтобы это соответствовало всем размерам ПК,телевизора,4k, экрана ноутбука.
Ответ №1:
Похоже, вы использовали фиксированный width: 250px; на своем ребенке. То box class . Я пошел дальше и изменил width to 33.33% настройки, чтобы они соответствовали трем полям, которые у вас сейчас есть. Таким образом, каждый столбец-прямоугольник разделен на 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; } lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;titlegt;Documentlt;/titlegt; lt;link rel="stylesheet" href="activity.css"gt; lt;/headgt; lt;bodygt; lt;div class="container"gt; lt;div class="box"gt; lt;div class="thumb"gt; lt;img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt=""gt; lt;/divgt; lt;div class="details"gt; lt;div class="content"gt; lt;i class="fa fa-gift" aria-hidden="true"gt;lt;/igt; lt;img src="/images/facebook.png" alt=""gt; lt;h3gt;Desert Safarilt;/h3gt; lt;a href="#"gt;Read Morelt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; lt;div class="box"gt; lt;div class="thumb"gt; lt;img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt=""gt; lt;/divgt; lt;div class="details"gt; lt;div class="content"gt; lt;i class="fa fa-gift" aria-hidden="true"gt;lt;/igt; lt;img src="/images/facebook.png" alt=""gt; lt;h3gt;Desert Safarilt;/h3gt; lt;a href="#"gt;Read Morelt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; lt;div class="box"gt; lt;div class="thumb"gt; lt;img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt=""gt; lt;/divgt; lt;div class="details"gt; lt;div class="content"gt; lt;i class="fa fa-gift" aria-hidden="true"gt;lt;/igt; lt;img src="/images/facebook.png" alt=""gt; lt;h3gt;Desert Safarilt;/h3gt; lt;a href="#"gt;Read Morelt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; Комментарии:
1. если вы можете показать мне, как я добавлю ссылку на каждый контейнер, которая будет полезна, я не хочу, чтобы ссылка была на подробнее, я хочу на всю коробку
2. @MSameerAsif Вы можете обернуть якорные теги
lt;a href="#"gt;lt;/agt;вокруг вашегоlt;div class="details"gt;типа так:lt;a href="#"gt;lt;div class="details"gt;lt;/agt;а также вокруг вашего img так.lt;a href="#"gt;lt;img src="/images/facebook.png" alt=""gt;lt;/agt;поскольку в каждой 1/3 содержимого есть два отдельных дочерних контейнера, вам придется связать их по отдельности, но если вы дадите им одну и ту же ссылку, она будет действовать одинаково.