How to stretch an image to within the padding of its parent?

Question

This is what I want to achieve:

|                           |
|     bla bla text text     |
|     more text and bla     |
+---------------------------+
|IMAGE IMAGE IMAGE IMAGE IMA|
|GE IMAGE IMAGE IMAGE IMAGE |
|IMAGE IMAGE IMAGE IMAGE IMA|
+---------------------------+
|     and the text goes     |
|     on and on and on.     |
|                           |

The markup and CSS look something like:

<div class="container">
  <p>... text ...</p>
  <img>
  <p>... text ...</p>
</div>

.container {
  padding: 100px;
}

Note:

• I don't know the size or aspect ratio of the image. It should just stretch to the full width, preserving its aspect ratio.
• I don't know the width of the parent beforehand. The parent stretches to fit the window.
• I do know the parent's padding.

Things I considered:

• Negative margins on the image, to "pull" it into the padding. However, it retains its "natural" size unless I also set a width, and width: 100% does not include the parent's padding. width: calc(100% + 200px) should work, but browser support is only 81%.
• box-sizing is useless here, since we care about the parent's padding, not the image's.
• position: absolute lets me set left: 0 and right: 0 to get the right width. However, it takes the image out of the flow, so the subsequent text disappears behind it.
• Removing the parent's padding, and putting left and right margins on the <p> elements. But then I'd also have to do that for all other elements that might appear inside. I could do this with .container > * but it feels hacky.
• JavaScript. Don't even want to think about it.

Is there a clean way to achieve this?

Answer 1

.container {
  padding: 100px;
  border: 1px solid #000;
}
.img-holder { /* don't give it width property*/
  margin-left: -100px;
  margin-right: -100px;
}
p {
  border: 1px solid #f00
}
img {
  width: 100%;
}

<div class="container">
  <p>... text ...</p>
  <div class="img-holder">
    <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
  </div>
  <p>... text ...</p>
</div>

Rest you can style your image as your requirement

Answer 2

You can use

.container img{
width:100%;
}

its will maintain ratio as per width of parent object.