admin管理员组文章数量:1291082
I have images in a carousel, and I have set the height to 40vh. The picture looks fine, except that as the screen gets larger, it zooms to the top of the image instead of the bottom where I want it to focus.
I have tried setting vertical-align of the image to bottom, but I did not see any change in how the image was displayed.
I have tried setting position to relative and setting left and bottom to 0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- Adding link for Bootstrap components -->
<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Carousel of Photos -->
<section id="Carousel">
<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./Assets/Sea Two.jpg" class="d-block w-100" alt="Seafolly store front">
<div class="carousel-caption d-none d-md-block">[enter image description here](.jpg)
</div>
</div>
<div class="carousel-item">
<img src="./Assets/Pat Nash Four.JPG" class="d-block w-100" alt="Patricia Nash in-store display">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<div class="carousel-item">
<img src="./Assets/DSCF1594 copy.jpg" class="d-block w-100" alt="Kaari Blue display">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<div class="carousel-item">
<img src="./Assets/Shakespeare Four.jpg" class="d-block w-100" alt="Interior of Shakespeare & Co. restaurant">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<div class="carousel-item">
<img src="./Assets/Cole Haan Grand Rapids.bmp" class="d-block w-100" alt="Cole Haan store interior">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<script src="/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
My Css is .
carousel-inner{
background-color: blue;
position: relative;
height: 45vh;
width: 100%;
}
.carousel-item{
background-color: rgb(255, 0, 0);
position: absolute;
width:100vw;
margin: auto;
align-items: end;
display: flex;
}
.carousel-item.img {
position: relative;
left: 0;
bottom: 0;
vertical-align: bottom;
}
I have images in a carousel, and I have set the height to 40vh. The picture looks fine, except that as the screen gets larger, it zooms to the top of the image instead of the bottom where I want it to focus.
I have tried setting vertical-align of the image to bottom, but I did not see any change in how the image was displayed.
I have tried setting position to relative and setting left and bottom to 0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- Adding link for Bootstrap components -->
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Carousel of Photos -->
<section id="Carousel">
<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./Assets/Sea Two.jpg" class="d-block w-100" alt="Seafolly store front">
<div class="carousel-caption d-none d-md-block">[enter image description here](https://i.sstatic/JImBQG2C.jpg)
</div>
</div>
<div class="carousel-item">
<img src="./Assets/Pat Nash Four.JPG" class="d-block w-100" alt="Patricia Nash in-store display">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<div class="carousel-item">
<img src="./Assets/DSCF1594 copy.jpg" class="d-block w-100" alt="Kaari Blue display">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<div class="carousel-item">
<img src="./Assets/Shakespeare Four.jpg" class="d-block w-100" alt="Interior of Shakespeare & Co. restaurant">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<div class="carousel-item">
<img src="./Assets/Cole Haan Grand Rapids.bmp" class="d-block w-100" alt="Cole Haan store interior">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
My Css is .
carousel-inner{
background-color: blue;
position: relative;
height: 45vh;
width: 100%;
}
.carousel-item{
background-color: rgb(255, 0, 0);
position: absolute;
width:100vw;
margin: auto;
align-items: end;
display: flex;
}
.carousel-item.img {
position: relative;
left: 0;
bottom: 0;
vertical-align: bottom;
}
1 Answer
Reset to default 0The rule which contains the vertical bottom alignment does not apply to any elements in your code because its selector .carousel-item.img is incorrect.
The images in your code are inside the divs which have the .carousel-item class, i.e. they are their children. So your css selector for that rule needs to be .carousel-item img {...} instead of .carousel-item.img {...}. Note that I added a space between .carousel-item and img and deleted the dot between the two terms. That way it applies to any <img> element which is a descendant of any element that has the "carousel-item" class.
The way you wrote it the rule would only apply to elements that have both "carousel-item" and "img" as a class. (note the difference between img, i.e. the <img> tag, and .img as a class for any element).
本文标签：
版权声明：本文标题：css selectors - when I limit the height of my image, I see the top of the image, but I want to see the bottom of the image - Sta 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741523875a2383351.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论