Extend image border to body width-CodePudding

I have a document like below, which has some images with CSS borders:

body {
  max-width: 70%;
  margin: 0 auto;
}

img {
  border: 6px solid orange;
  margin: auto;
  display: block;
}

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut porttitor porta tellus, sit amet sodales turpis mattis vel.
<br>
<img src="https://www.quackit.com/pix/routeburn_track/routeburn_flats_t.jpg" />
<br> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut porttitor porta tellus, sit amet sodales turpis mattis vel.

I would like to extend the borders for all images in the document to the full width of the body/paragraphs, like so:

I've spent some time looking for the right CSS, but have come up empty handed. Would love some assistance!

CodePudding user response：

Don't use <br> to space out text. Instead use <p> which has default top bottom margin.

For the image, you can nest the image in a containing div, in your case I called it .img-wrapper and set the border to that element. Then display the image normally.

.wrapper {
  max-width: 70%;
  margin: 0 auto;
}

.img-wrapper {
  border: 6px solid orange;
}

img {
  margin: auto;
  display: block;
}

<div >
  <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut porttitor porta tellus, sit amet sodales turpis mattis vel.</p>
  <div ><img src="https://www.quackit.com/pix/routeburn_track/routeburn_flats_t.jpg" /></div>
  <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut porttitor porta tellus, sit amet sodales turpis mattis vel.</p>
</div>

CodePudding user response：

You can use object-fit to help here but you need to define a fixed height of your images:

body {
  max-width: 70%;
  margin: 0 auto;
}

img {
  border: 6px solid orange;
  object-fit:contain;
  width: 100%;
  height: 150px;
}

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut porttitor porta tellus, sit amet sodales turpis mattis vel.
<br>
<img src="https://www.quackit.com/pix/routeburn_track/routeburn_flats_t.jpg" />
<br> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut porttitor porta tellus, sit amet sodales turpis mattis vel.