CODEWITHSUNDEEP
htmlcss
MightyPork
MightyPork

Reputation: 18861

Force image to overflow padding of parent div and be 100% wide

I want images with class wide to go over the parent div's padding. When I give them negative margin to do it, they don't stretch to full width (max-width:100% keeps them the same size).

#content {
  padding: 20px;
  border: 1px solid red;
}
/* regular images */

#content img {
  max-width: 100%;
}
/* full width images, videos etc */

#content .wide {
  margin-left: -20px;
  margin-right: -20px;
}
<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet non libero eget ornare. Proin commodo tortor risus, vitae malesuada lectus pharetra quis. Aliquam quis elit in erat facilisis pellentesque. Donec ornare ligula eu massa dignissim posuere
    sed eu sapien.</p>

  <!-- this should stretch -->
  <img class="wide" src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">

  <p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit</p>

  <!-- this one should NOT -->
  <img src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">

  <p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit, s</p>
</div>

How can I achieve it? I want the image to be left to right without no spaces on sides.

Images without the class wide should be contained inside the paddings as normal.

(ps. giving margin to everything but the images will work, but it's a lot of work and not very elegant)

Upvotes: 1

Views: 181

Answers (2)

Bram Vanroy
Bram Vanroy

Reputation: 28437

I'd suggest adding markup as isherwoord suggested, which would allow for better browser support than my answer. If that is not possible, you can use the calc function to add the negative margins to the 100% width. Browser support isn't even that bad!

#content {
  padding: 20px;
  border: 1px solid red;
}
/* regular images */

#content img {
  max-width: 100%;
}
/* full width images, videos etc */

#content .wide {
  margin-left: -20px;
  margin-right: -20px;
  max-width: calc(100% + 40px);
}
<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet non libero eget ornare. Proin commodo tortor risus, vitae malesuada lectus pharetra quis. Aliquam quis elit in erat facilisis pellentesque. Donec ornare ligula eu massa dignissim posuere
    sed eu sapien.</p>

  <!-- this should stretch -->
  <img class="wide" src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">

  <p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit</p>

  <!-- this one should NOT -->
  <img src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">

  <p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit, s</p>
</div>

Upvotes: 3

isherwood
isherwood

Reputation: 61055

Instead of stretching the image with negative margins, add a container element:

#content {
  padding: 20px;
  border: 1px solid red;
}
/* regular images */

#content img {
  max-width: 100%;
}
/* full width images, videos etc */

#content .wide {
  margin-left: -20px;
  margin-right: -20px;
}
<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet non libero eget ornare. Proin commodo tortor risus, vitae malesuada lectus pharetra quis. Aliquam quis elit in erat facilisis pellentesque. Donec ornare ligula eu massa dignissim posuere
    sed eu sapien.</p>

  <!-- this should stretch -->
  <div class="wide">
    <img src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">
  </div>

  <p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit</p>
</div>

Upvotes: 1

Related Questions