-2

I've tried everything I can find.

I'm trying to keep an image from overflowing outside the div that it is inside.

I've tried: 

div.row #whoPic {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    max-width: auto;
    max-height: auto;
    max-width: 300px;
    max-height: 300px;
}

...and many variations of each of those values.

I've also tried targeting all img's, as well as targeting very precisely.

Please help me out. Going nuts here.

David
  • 39
  • 1
  • 10
  • are you using that entire block of css? – cup_of Jul 25 '17 at 01:31
  • 1
    Possible duplicate of [How do I auto-resize an image to fit a div container](https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container) – Ricky Dam Jul 25 '17 at 01:37

1 Answers1

1

In fact this question has been asked before.
Here: How do I auto-resize an image to fit a div container
Here: Make an image width 100% of parent div, but not bigger than its own width
Here: Contain an image within a div?
Here: How do I fit an image (img) inside a div and keep the aspect ratio?

Restrict the image with max-width and max-height both set to 100%.

.theContainer {
  width: 300px;
  height: 100px;
  background-color: lightblue;
}

.theContainer img {
  max-width: 100%;
  max-height: 100%;
}
<div class="theContainer">
  <img src="https://placehold.it/200x200">
</div>
<h3> The original image size is 200x200 </h3>
<img src="https://placehold.it/200x200">
Ricky Dam
  • 1,833
  • 4
  • 23
  • 42
  • 1
    `` does not use or need a closing slash. – Rob Jul 25 '17 at 01:29
  • Does this work on other objects as well, such as iframes and forms? I have a form that is leaving its div as well, but not matter what I do, I can't get it to stay in there, or for the div to change its height when the window is smaller. – David Jul 27 '17 at 01:06
  • This method only works for images. I just tried it with forms and iframes and it didn't work for either. – Ricky Dam Jul 27 '17 at 01:26
  • @Rob `` and `` are equally valid. It's the difference of XHTML and HTML. Both are standards compliant. – dougoftheabaci Jun 06 '18 at 00:58
  • @dougoftheabaci The question is tagged HTML, not XHTML. There has never been any HTML specification that has ever called for a closing slash on the `` tag. Though allowed, because it's a void element, the specification states a closing slash means nothing, it does nothing and browsers are instructed to ignore it. – Rob Jun 06 '18 at 02:59
  • (1) So you're suggesting no one ever says HTML as a catch-all for both? (2) It's both valid (part of the spec) and a common style convention. But that's alright. – dougoftheabaci Jun 07 '18 at 04:11