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

Answer 1

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>

Answer 2

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;
}

Answer 3

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%;
}