как сделать полноразмерное фоновое изображение без определенной высоты?

#css

#css — код

Вопрос:

 <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>

body {width:100%;
      height:100%;
      margin:0;
      padding:0;}

#star_box {width:100%;
           height:auto;
           overflow:hidden;
           display:block;
           background-image:url('https://www.rakuten.ne.jp/gold/sappun/promotion/test.jpg') ;
           background-size: cover;
           background-repeat: no-repeat;
           background-position: center top;}

.star {color:white;
       animation-name:zoomin;
       animation-duration:5s;
       text-align:center;
       animation-iteration-count:infinite;}

.star2 {color:white;
       animation-name:zoomin;
       animation-duration:5s;
       text-align:center;
       animation-iteration-count:infinite;
       animation-delay:.5s;}

@keyframes zoomin {
    0%{
 transform: scale(0,0) rotateZ(0deg);
    }
  25%{
   transform: scale(4,4) rotateZ(80deg); 
    }
  50%{
   transform: scale(0,0) rotateZ(0deg);
    }
  100%{
   transform: scale(0,0) rotateZ(0deg);
    }
}

#star_box > p:nth-child(1) {margin-left:450px;
                            margin-top:150px;}

#star_box > p:nth-child(2) {margin-left:400px;
                            margin-top:10px;}
                            
#star_box > p:nth-child(3) {margin-left:-450px;
                            margin-top:350px;}
                            
#star_box > p:nth-child(4) {margin-left:-530px;
                            margin-top:30px;}
                            
#star_box > p:nth-child(5) {margin-left:280px;
                            margin-top:-200px;}                         

#empty_box {width:80%;
            height:1200px;
            display:block;
            margin:0 auto;
            margin-top: -350px;}

#text {text-align:center;
       color:white;
       font-size:50px;
       margin-top:250px;
       opacity:0;
       transition:opacity .3s linear;}
       
#empty_box:hover ~ #text {opacity:1;}      

</style>


</head>
<body>

<div id="star_box">

    <p class="star">amp;#10022;</p>
    
    <p class="star2">amp;#10022;</p>
    
    <p class="star">amp;#10022;</p>
    
    <p class="star2">amp;#10022;</p>
    
    <p class="star">amp;#10022;</p>
    
    <div id="empty_box"></div>
    
    <p id="text">今すぐ見る</p>
</div>


</body>
</html>

Развернуть фрагмент

Привет! теперь у меня проблема с этим кодом, чтобы сделать фон отзывчивым в полном размере.
итак, во-первых, оно должно быть адаптивным для мобильных
устройств, а во-вторых, высота фона должна составлять 100% без содержимого, чтобы я мог постоянно видеть полное изображение.
я уже пробовал background-size: cover, но он не работает в моем коде: (
где я должен исправить, чтобы сделать фон в полный размер?

любая помощь будет очень признательна. Спасибо! : D

1. Под полным размером вы подразумеваете полноэкранный режим или браузер сокращает какую-то часть из-за background-size: cover , а вы не хотите, чтобы он это делал.

2. является ли «background-size: cover» похожим на вырезание?? я этого не знал;;… я хочу сделать его полноразмерным, но если я установлю какое-то определенное число, например, height: 2500px ~, тогда он больше не будет реагировать, так что ….: ( что, как я могу сделать это на весь экран?

3. Альтернатива background-size: cover is background-size: contain Contan покажет все изображение целиком.

Ответ №1:

Использование height будет зависеть от вашего контейнера, а использование background-size: cover растянет ваше изображение в соответствии с контейнером, поэтому оба они не гарантируют, что изображение будет размером во весь экран.

Вы можете использовать vh и vw для этого, например:

 .img {
 height: 100vh;
 width: 100vw;
 background-size: cover;
 background-repeat: no-repeat;
}

Развернуть фрагмент

1. Вы уверены? vh и vw единицы измерения не относятся к родительскому элементу, используйте % скорее единицы измерения, которые относятся к области просмотра.

2. Я думаю, он хочет полноэкранный режим, так что относительно видового экрана все должно быть в порядке

3. Привет! спасибо за вашу помощь! : D использование способа «vh, vw» действительно приятно, спасибо, что дали мне знать об этом! 🙂 но это все равно не полный размер изображения, я хочу видеть этот фон как целое изображение, например, когда я помещаю <img src=»img_link»>

Ответ №2:

Изменение background-size: cover; идентификатора #star_box на background-size: contain;

 #star_box {
  background-size: contain;
}