How to Stop an Image Displaying Outside of The Div

How do I stop an image displaying outside of the div

div#outer { overflow:hidden; }

demo here: http://jsfiddle.net/J34aJ/

Image goes beyond container div bounds

.intro {
margin: 10px;
outline: 1px solid #CCC;
background: #A00;
color: #FFF;
height:auto;
overflow:auto;
}
.img{
float:right;
height:auto;
}

<div class="intro">
    <div class="img"> <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s1600/tall+copy.jpg"    style="margin: 10px 10px; "/></div>

  <p>Sorry, but the page you requested could not be found.</p>
</div>

DEMO

Avoid an image to go outside a div?

You need overflow:hidden see an example here:

http://www.jsfiddle.net/S8qAq/

Read about overflow: here W3Schools

Good luck!

CSS: Image appears outside div borders

If you use flex instead of float the div will stay in the same size as the image.

  <div style="padding: 20px;">
  <div style="border: solid black 2px; display:flex">
    <img width="100px" height="150px" src="https://karateinthewoodlands.com/wp-content/uploads/2017/09/default-user-image.png">
    <div>
      <p>Username</p>
      <p>User Role</p>
    </div>
  </div>
</div>

How can I keep an image from overflowing its container?

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

How to not display an image if outside of div?

Give the parent div the style overflow: hidden and go back to relative positioning (it won't work with absolute positioning).

There's probably a better way to solve the actual underlying issue, though, if we had a bit more context. But overflow: hidden will probably be part of it regardless.

How to prevent the element go outside the div

you need to add a min-width to your image. flex needs this for whatever reason, otherwise it will not downscale the elements. I come across this every time i use flex :D

.img-child {
    min-width: 0;
    width: 100%;
    margin-right: 30px;
}

Image flow out of div

The simple method of doing it (that works in most browsers), is that you make your main wrapper have position:relative, and the make the div (that you want to flow outside) have position: absolute; left: -25px; top: -25px;.

Having position:relative as the wrapper makes the position:absolute relative inside the parent container.