我正在尝试使.panda_section_wrapper的background-image具有响应性。虽然它最终在较小的设备上看起来不错,但在较大的设备上是错误的。它被拉伸是可以的,但我希望它在这种情况下也能拉伸高度,因此Image在小屏幕和大屏幕上看起来都很好。我如何才能做到这一点?
我的网站:https://wandawix.github.io/online-zoo/index.html
我的代码:https://github.com/WandaWix/online-zoo
<main class="main">
<!-- Panda section ---------------------------------------------------------- -->
<div class="panda_section_wrapper">
<!-- <div class="panda_circle">
</div>
<div class="writting">Watch<br>your<br><span style="color: #FFEE2E">favorite</span><br>animal<br>online</div>
</div>
<div class="btn btn_watch">
<button class="btn">Watch online</button>-->
</div>
.panda_section_wrapper {
/* max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 69vh;
background-size: 93vw; */
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 25vh; /*min(max(16px, 80vw), 60vh);*/
background-size: 93vw;
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
background-size: 93vw;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-size: 100%;
background-size: 100% 100%;
}
.panda_section_container {
max-width: 1160px;
height: 100%;
margin: 0 auto;
}
.panda_circle {
position: relative;
width: 40vw;
height: 50vh;
left: 33%;
top: 0%;
background: linear-gradient(113.96deg, #F9804B 1.49%, #FE9013 101.44%);
border-radius: 50%;
}
1条答案
按热度按时间ergxz8rk1#
请尝试使用此:
看看这个能不能用