因此，我试图使我的旋转木马响应大小调整，和移动设备。但是，当我调整屏幕大小，实际的图像不停留在卡内，我有旋转木马在。
The website is actually live, so if you wanted to take a look, please visit wwww.alysaandjordanplustwo.baby
原谅我的技能-我是第一次学习前端。
下面是我的HTML：
<!DOCTYPE html>
<html>
<head>
<title>Alysa and Jordan Plus Two | Home </title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="background-image: url(img/background.png); background-size:cover;">
<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-dark" style="background-color: #6C3400;" >
<a class="navbar-brand" style="color: white;" href="#">Jordan and Alysa Plus Two</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: #6C3400;">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active" >
<a class="nav-link" style="color: #FFCD73;" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: white;" href="photo_gallery.html">Photo Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: white;" href="registry.html">Registry</a>
</li>
<div class="dropdown nav-link" style="padding: none; margin: none;">
<a class="dropdown-toggle" href="about.html" style="background-color: #6c3400; color: white;" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item no-border" href="baby_b_memorial.html">Baby B Memorial</a>
</div>
</div>
<li class="nav-item">
<a class="nav-link" style="color: white;" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="container justify-content-center">
<div class="row justify-content-center">
<div class="card justify-content-center" style="margin-top: 1rem;">
<div class="card-body">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="width: 800px; height: 400px" >
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner justify-content-center">
<div class="carousel-item justify-content-center active " style="width:800px; height:400px;">
<img class="card-img" src="img/first_halloween_resized.jpg" alt="First slide">
</div>
<div class="carousel-item justify-content-center" style="width:800px; height:400px;" >
<img class="card-img" src="img/2nd_image_resized.jpeg" alt="Second slide">
</div>
<div class="carousel-item justify-content-center" style="width:800px; height:400px;">
<img class="card-img" src="img/third_slide.svg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="container text-center" style="background-color: #FFCD73; border-radius: 10px; height: 100%; width: 100%; margin-top: 5vh;">
<h3 style="font-style:italic; padding-top: 15px; padding-bottom: 15px;">"Don't find love. Let love find you. <br> That is why it is called falling in love because you do not force yourself to fall,<br> you just fall" <br> - Author Unknown</h3>
<h2 style="font-style:italic; padding-top: 15px; padding-bottom: 15px;">~~~</h2>
<a href="gender_reveal.html" style="font-style:bold; color: #6c3400; padding-top: 15px; padding-bottom: 15px;"><h3 style="font-style:bold; color: #6c3400; padding-top: 15px; padding-bottom: 15px;">Find out our babies gender!</h3></a>
</div>
<div class="container" style="padding-top: 5vh;">
<div class="row">
<div class="col-lg">
<!-- Photo on the left -->
<img class="rounded mx-auto d-block img-thumbnail" src="img/first_photo.jpg" style="margin-bottom: 5vh;">
</div>
<div class="col-sm" style="background-color: #FFCD73; border-radius: 10px; padding-top: 15px; padding-bottom: 10vh;">
<H2>Our Story</H2>
<p>Alysa and I met for the first time at Kennesaw State University in the Fall 2022 semester. I was the first one to message Alysa, as we were in a student group where we could all talk about our majors and meet new people. I decided to message Alysa to see if she wanted to meet and perhaps study together. Which is just what we did – we ended up studying together, and I offered as much help as I could remember while she was taking Calculus. It had been years since I took Calculus 1, and I was very rusty. Before we knew it, we were always around each other, almost every possible minute that we could. Eventually, I believe, we ended up falling for each other, even though we both were hesitant to enter a relationship. I am so, so, so glad that we met, and for the next steps of our life together! <br><br> - Jordan | September 7th, 2022 </p>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small white pt-4" style="background-color: #6C3400; margin-top: 10vh;">
<!-- Footer Links -->
<div class="container-fluid text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 mt-md-0 mt-3">
<!-- Content -->
<h5 style="color: #FFFFFF;">Thank you for visiting our website!</h5>
<p style="color: #FFFFFF;">Please be respectful, and only share this website with immediate family for the time being. Thank you! <br><br>- Jordan & Alysa</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="text-uppercase" style="color:#FFFFFF;">Registry Links</h5>
<ul class="list-unstyled">
<li>
<a href="https://www.amazon.com/baby-reg/J48Z6DSREQX9">Amazon</a>
</li>
<li>
<a href="#!">Buy Buy Baby</a>
</li>
<li>
<a href="#!">Target</a>
</li>
</ul>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="text-uppercase" style="color:#FFFFFF;">Quick Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">RSVP Form (Coming Soon)</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3" style="color:#FFFFFF">Copyright © 2022:
<a href="https://jordanviehmeyer.dev"> Written with ♥ by Jordan Viehmeyer (Dad)</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- Javascript-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>我没有修改carousel本身的CSS代码，所以它是使用min.css文件的 Bootstrap 标准。
照片的尺寸是800宽，400高。这就是我希望他们如何显示，但比例。
1条答案
按热度按时间xxls0lw81#
从你的代码中删除所有的
style="width:800px; height:400px;"。通过添加这个元素，你强制元素为固定大小，这样元素就不会有响应。在您的carousel中，将
.card-img类替换为d-block w-100类，如下例所示...（不要使用card-img类）按照这些BS文档...带指示器的旋转木马