css - 需要修复幻灯片并找出响应能力。只有 CSS/HTML
问题描述
图像被剪掉了一点,左边的文字没有居中我也尝试为图片添加最小高度,为横幅图像添加最大宽度以提高响应能力,但他们没有采取。关于这些的任何提示?
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Comfortaa', cursive;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
}
h1 {
font-family: 'Righteous', cursive;
font-size: 4rem;
}
img {
width: 100%;
}
header {
height: 8vh;
width: 90%;
margin: 0 auto;
}
.nav-links {
height: 8vh;
width: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.nav-link:hover {
border-bottom: 4px black solid;
}
.banner {
background-image: url(/Aleesha/woman\ wit\ hat.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 30vh;
margin-bottom: 2vh;
}
.hats {
display: flex;
height: 40vh;
}
.hat-text {
border: 2px dotted;
flex: 1;
display: flex;
}
h2 {
width: 100%;
border: 2px dotted;
font-size: 8rem;
align-items: center;
}
#slider {
flex: 1.8;
overflow: hidden;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 20s slider infinite;
}
#slider figure img {
width: 100%;
float: left;
max-width: 20%;
min-height: 100%;
object-fit: contain;
}
@keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
<html>
<body>
<main>
<!--BANNER-->
<section class="banner">
<div class="container">
<div class="banner-content">
<h1>ALEESHA</h1>
</div>
</div>
</section>
<!--HATS-->
<section class="hats">
<div class="hat-text">
<H2>HATS</H2>
</div>
<div id="slider">
<figure>
<img src="/Aleesha/Pics/Slideshow/Hats/slide1.jpg" alt="Black Reptile Hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide2.jpg" alt="Cheeta Squence Hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide3.jpg" alt="White Thug Life Bucket Hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide4.jpg" alt="yellow W worn blue hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide1.jpg" alt="Life is Fantastic yellow hat">
</figure>
</div>
</section>
</main>
</body>
</html>
解决方案
推荐阅读
- mysql - 如何使用子查询更新 Mysql 查询
- python-3.x - Authlib:json.decoder.JSONDecodeError:期望值:第 1 行第 1 列(字符 0)
- spring-boot - Spring Boot Hibernate JPA @OneToOne 双向 StackOverflowError
- python - Asyncio 协程返回 <_GatheringFuture pending> 而不是实际值
- reactjs - 嵌套路由器中的链接无法导航到父路由器的路由
- algorithm - 排序点算法
- python - 为什么当我打开一个文本文件时会这样说,“参数应该是整数或无,而不是'str'”
- python - 我收到一条错误消息,上面写着 AttributeError: 'str' object has no attribute 'read' 而且我不知道如何修复它
- laravel - Laravel Nova 限制资源查看
- ruby-on-rails - 发生概率为 x% 的最佳算法?