如何防止图像溢出其 div 容器

Question

我有这个代码：

 .container { margin-right: auto; margin-left: auto; max-width: 1400px; padding-left: 1rem; padding-right: 1rem; } .grid { display: grid } .vh-100 { min-height: 100vh;} .grid-gap { grid-gap: 0.7rem; } .flex { display: flex; -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; } .text-center { text-align: center; } .flex-dir-col { flex-direction: column; } .relative { position: relative; } .absolute { position: absolute; } .img-fluid { max-width: 100%; height: auto; } .content-wrapper .container { grid-auto-flow: row dense; -ms-grid-columns: 3fr 1fr; grid-template-columns: 3fr 1fr; -ms-grid-rows: 1fr; grid-template-rows: 1fr; gap: 0px 35px; } .content-wrapper .container .main-content { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: 1 / 1 / 2 / 3; } .content-wrapper .container .main-content .post-content .post-content-top .post-sharing .icon { width: 50px; height: 50px; background-color: #f1f1f1; margin-bottom: 20px; border-radius: 30%; -webkit-border-radius: 30%; -moz-border-radius: 30%; -ms-border-radius: 30%; -o-border-radius: 30%; color: #3ab77d; -webkit-box-shadow: 0px 5px 15px -5px #00000070; box-shadow: 0px 5px 15px -5px #00000070; } .content-wrapper .container .main-content .post-content .post-content-top .post-sharing .icon i { line-height: 50px; font-size: 20px; transition: all .4s; -webkit-transition: all .4s; -moz-transition: all .4s; -ms-transition: all .4s; -o-transition: all .4s; } .content-wrapper .container .main-content .post-content .post-content-top .post-sharing .icon:hover { background-color: #3ab77d; } .content-wrapper .container .main-content .post-content .post-content-top .post-sharing .icon:hover i { color: #f1f1f1; } .content-wrapper .container .main-content .post-content .post-content-top .post-featured-image { overflow: hidden; } .content-wrapper .container .main-content .post-content .post-content-top .post-featured-image .post-date { top: 1rem; left: 1rem; background-color: #fff; width: 50px; height: 50px; line-height: 1.5; } .content-wrapper .container .main-content .post-content .post-content-top .post-featured-image .post-date .day { font-size: 1rem; padding-top: .2rem; } .content-wrapper .container .main-content .post-content .post-content-top .post-featured-image .post-date .month { font-size: 0.75rem; } .content-wrapper .container .sidebar { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 1 / 2 / 2 / 3; position: relative; background-color: rgba(255, 0, 0, 0.468); }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css" rel="stylesheet"/> <section class="content-wrapper mt-2 mb-2"> <div class="container grid vh-100 grid-gap"> <div class="main-content"> <div class="post-content"> <div class="post-content-top flex"> <div class="post-sharing flex flex-dir-col mr-1 text-center"> <a href="#" class="icon"><i class="bi bi-facebook"></i></a> <a href="#" class="icon"><i class="bi bi-twitter"></i></a> <a href="#" class="icon"><i class="bi bi-reddit"></i></a> <a href="#" class="icon"><i class="bi bi-whatsapp"></i></a> </div> <div class="post-featured-image relative"> <img src="https://cdn.pixabay.com/photo/2022/06/14/17/30/beach-7262493_1280.jpg" class="img-fluid"> <div class="post-date absolute flex flex-dir-col text-center"> <span class="day">23</span> <span class="month">JUL</span> </div> </div> </div> </div> </div> <div class="sidebar"> This is the sidebar </div> </div> </section>

所以这应该是一个类似于博客的布局，主要内容和右侧的侧边栏。 我的问题是图像溢出了它的 div 并且它在侧边栏下方流动。 我在侧边栏添加了一个稍微透明的背景颜色，这样它就更明显了。

我尝试添加max-width: 100%和height: auto; 到这里推荐的图像，但它没有用。 我还尝试将overflow: hidden添加到图像的父 div，但没有运气。 但无论如何我都不想剪辑图像。

我不明白，因为max-width: 100%和height: auto; 应该使图像响应，对吧？

知道我做错了什么吗？ 谢谢

Answer 1

有两种方法可以实现这一点：

1. 您可以剪切溢出的图像。

overflow-x: hidden;

2. 您可以像这样给出详细的样式

 *{ margin: 0; padding:0; } img{ width: 100%; height: 100%; } .image_container{ max-width: 100vw; max-height: 100vw; }

 <div class="image_container"> <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/80a9d98d-327f-4bb2-b173-4298d710e51c/derkflv-9f975f3d-791f-4e16-8d9d-fb0a9e5e0554.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzgwYTlkOThkLTMyN2YtNGJiMi1iMTczLTQyOThkNzEwZTUxY1wvZGVya2Zsdi05Zjk3NWYzZC03OTFmLTRlMTYtOGQ5ZC1mYjBhOWU1ZTA1NTQucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.eEDVAlJGBqXo6OeZEORXWk1veGSHFL-ZTUMz43Jtr3Q" alt="image"> <div>