How can I keep an image from overflowing its container?

Question

I'm working with Reactjs in a page... like a diary. At the end of the page, there is an img that I'm trying to set inside the page but because of the size, it goes out of the page... I try to modify it with Css, but still not working. Can you help me please?

This is how the page looks:

This is how the html code looks:

<div className="notes__content">
            <input type="text" placeholder="Somer awesome title" className="notes__title-input" autoComplete="off"/>
            <textarea placeholder="What happened today?" className="notes__textarea"></textarea>
            <div className="notes__image">
                <img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen"/>
            </div>
        </div>

This is how I set the css:

    .notes__main-content{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.notes__appbar{
    align-items: center;
    background-color: $primary;
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px 10px 20px;   
}

.notes__content{
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
}

.notes__title-input, .notes__textarea{
    border: none;

    &:focus{
        outline: none;
    }
}

.notes__title-input{
    color: $dark-grey;
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 10px;
}

.notes__textarea{
    border: none;
    color: $dark-grey;
    font-size: 20px;
    flex: 1 1 auto;
    resize: none;   
}

.notes__image{
    box-shadow: 5px 5px $dark-grey;
    height:  150px;
}

To be clear, what I want to do is to set the img to 150px so it can fit my page. Thank you for your help

Well I'm using React js, so I have to use className... so I think that's the proper way — Andrés F Ariza Calderón, Dec 08 '20 at 20:06
Does this answer your question? https://stackoverflow.com/questions/4394309/how-do-i-fit-an-image-img-inside-a-div-and-keep-the-aspect-ratio — isherwood, Dec 08 '20 at 20:14
Thanks for your comment, that answer helped me to understand a little bit more about it... but it didn't worked... One of the answers I receive, solved my problem... Thanks — Andrés F Ariza Calderón, Dec 08 '20 at 20:18

isherwood · Answer 1 · 2020-12-08T20:14:11.453

Images don't magically shrink to fit their containers. You need to tell them to do so:

.notes__image img {
  max-width: 100%; /* <-- here's your huckleberry */
}

You don't want to use the width property as that'll stretch images beyond their native size, and you don't want to set height as that will goof up aspect ratio.

Here I've converted className to class for demonstration purposes. If you view the fullscreen demo and shrink the window size you can see it in action.

.notes__main-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.notes__appbar {
  align-items: center;
  background-color: $primary;
  color: white;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 10px 20px;
}

.notes__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
}

.notes__title-input,
.notes__textarea {
  border: none;

  &:focus {
    outline: none;
  }
}

.notes__title-input {
  color: $dark-grey;
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 10px;
}

.notes__textarea {
  border: none;
  color: $dark-grey;
  font-size: 20px;
  flex: 1 1 auto;
  resize: none;
}

.notes__image {
  box-shadow: 5px 5px $dark-grey;
  height: 150px;
}
.notes__image img {
  max-width: 100%; /* <-- here's your huckleberry */
}

<div class="notes__content">
  <input type="text" placeholder="Somer awesome title" class="notes__title-input" autoComplete="off" />
  <textarea placeholder="What happened today?" class="notes__textarea"></textarea>
  <div class="notes__image">
    <img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen" />
  </div>
</div>

score 2 · Answer 2 · answered Dec 08 '20 at 19:51

You can add another div inside notes__image div. Lets call it notes__image__inner with a div wrapper.

<div className="notes__content">
        <input type="text" placeholder="Somer awesome title" className="notes__title-input" autoComplete="off"/>
        <textarea placeholder="What happened today?" className="notes__textarea"></textarea>
        <div className="notes__image">
          <div className="notes__inner__image">
            <img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen"/>
           </div>
        </div>
    </div>

Update the notes__image and img CSS with this:

.notes__image {
  box-shadow: 5px 5px $dark-grey;
  height: 150px;
  position: relative;
}
.notes__inner__image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.notes__inner__image img {
   width: 100%;
   position: static;
   height: 100%;
   object-fit: cover;
}

Thank you for your comment. I tried it but it cut the img... so that´s not the answer I'm looking — Andrés F Ariza Calderón, Dec 08 '20 at 20:12
You can remove image `height` and `width` for origin image ratio- — Sahid Hossen, Dec 09 '20 at 05:47

Matt · Accepted Answer · 2020-12-08T20:05:28.867

0

The className property is used in React. Is this a React application? If not, it needs to be revised to "class".

Also make sure your image does not overflow the bounds of the div. You can set strict width and height in the image by using the img tag's "width" and "height" properties. Or create a notes__image img declaration, like this:

.notes__image img {
  width: 100%;
  height: 100%;
}

edited Dec 08 '20 at 20:05

answered Dec 08 '20 at 19:40

Matt

109
1
12

Yes, I'm using React js... thanks for the advice – Andrés F Ariza Calderón Dec 08 '20 at 20:03
Ok so your className declaration is correct, then. Try the .notes__image img CSS I showed you. – Matt Dec 08 '20 at 20:06
Setting height explicitly will result in stretching. I doubt that's desirable in a blog post. – isherwood Dec 08 '20 at 20:08
Sure, I tried it but... what I want to do is to resize the img so it can fit my page... to set the img to 150 px – Andrés F Ariza Calderón Dec 08 '20 at 20:09
.notes__image img { width: 150px; height: 150px; } – Matt Dec 08 '20 at 20:12
yes, it works... I guess I needed to specify the img into the css, thanks – Andrés F Ariza Calderón Dec 08 '20 at 20:15
Make sure the height and width, if explicitly declared, are proportional to the original size of the image to prevent stretching. Let me know if you have any other problems! – Matt Dec 08 '20 at 20:16

How can I keep an image from overflowing its container?

3 Answers3