How do I prevent image overflowing its div container

Question

I have this code:

.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>

So this should be a blog like layout with a main content and a sidebar on the right. My problem is that the image is overflowing its div and it flows underneath the sidebar. I added a slightly transparent background color to the sidebar so it's more visible.

I tried to add max-width: 100% and height: auto; to the image as recommended here, but it didn't work. I also tried to add overflow: hidden to the parent div of the image, but no luck. But I wouldn't want to clip the image anyway.

I don't understand because max-width: 100% and height: auto; should make the image responsive, right?

Any idea what I'm doing wrong? Thanks

score 0 · Answer 1 · answered Jun 18 '22 at 15:10

There are 2 ways to achieve this:

You can cut the image which is being overflowed.

overflow-x: hidden;

You can either give detailed stylings, like this

*{
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>

How do I prevent image overflowing its div container

1 Answers1