CSS中的非背景响应式图像
我的图像正在占据其整个维度 - 跨越页面到您必须向右滚动以查看图像的点。我不想要这个。
我希望我的图像在网页中整齐地拟合并响应并响应页面的大小，无需向右滚动。
我计划在页面上有多个图像，顶部有文本，例如...
这是我当前的代码。我一直在尝试不同的替代方案，但我似乎无法弄清楚。
我的CSS代码：
#carousel {
position: absolute;
}
我的HTML代码：
<div id="carousel" align="center">
<img src="../images/....jpg" />
</div>
预先感谢。
My images are taking on its entire dimensions-- spanning the page to the point where you have to scroll right to see the image. I do not want this.
Screenshot Of Web Browser View
I would like for my images to neatly fit within the webpage and respond to the size of the page, without scrolling to the right.
I plan to have multiple images on the page with text at the top, like so...
Here is my current code. I've been trying different alternatives, but I can't seem to figure it out.
My CSS code:
#carousel {
position: absolute;
}
My HTML code:
<div id="carousel" align="center">
<img src="../images/....jpg" />
</div>
Thanks in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
添加
#carousel img {width：100％}或#carousel img {object-fit：cover}to css以获取响应式图像。Add either
#carousel img { width: 100% }or#carousel img { object-fit: cover }to your CSS for responsive images.