CODEWITHSUNDEEP
htmlcsswebresponsive-design
Matthieu Oger
Matthieu Oger

Reputation: 833

Negative margin on an image with a 100% width in CSS

I have this (simplified) situation :

<div class="page-content">
  <p>text</p>
  <p><img src="" /></p>
  <p>text</p>
  <!-- ... -->
</div>

And :

.page-content {
  padding: 0 20px;
}

.page-content img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

This way, I always have a padding inside my .page-content div (which contains a lot more than what I have copied here). The images cannot take more than the width of the page, minus the padding.

It works great on any screen size.

Example :

enter image description here

However, I want to make the images full-width when on a phone screen (bypassing the parent 20px padding).

i.e. :

enter image description here

I could resolve my problem if the parent (the <p>) had a negative margin (margin: 0 -20px;), but the html file is generated by Jekyll from a markdown file, and I can't add classes in it.

I can't find a a way to do this, apart from removing the padding of .page-content and setting it on each child. Which I would rather not do.

I can't set a fixed width either because I want that to work on every screen size.

Is there a way to select the parent in CSS ? Or another feature I'm unaware of ?

Thanks.

Upvotes: 19

Views: 20665

Answers (5)

art1fa
art1fa

Reputation: 23

Use the accepted solution from here and add a @media query for medium to large displays to keep the margin:

@media screen and (min-width: 600px) {
  .img-wrapper {
    margin: 0 0;
  }
}

Also, put width=100%; on your img.

Upvotes: 0

Tibastral
Tibastral

Reputation: 582

img {
  width: calc(100% + 40px);
  margin-left: calc(-20px);
  margin-right: calc(-20px);
}

I put calc inside the margin-left & right because if the calc function isn't implemented by the browser, it doesn't break design.

Upvotes: 36

pr0tipZ
pr0tipZ

Reputation: 141

Images behave in strange ways. I tried to accomplish the same thing but found it difficult. Instead, I ended up wrapping the image with a div and added box-sizing: border-box and margin: 0 -@your-negative-margin

<div><img /></div>


div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 -1rem;
}

div > img {
  width: 100%;
  margin: auto;
}

Upvotes: 1

ShufflerShark
ShufflerShark

Reputation: 387

as well as suggections above You could change css dependent on the device connecting(not sure what environment your using) or by the width of the screen althought you need to consider screen sizes etc. carefully if doing this approach

i.e.
@media screen and (max-width:400px) { p { margin: 0 -20px; } }

You would likely want to be more specific than just p.

Upvotes: 0

Mike Oram
Mike Oram

Reputation: 765

You have answered your own question. Remove the padding and set it on the child elements. (or use margin on the child elements as that is what your after really) It is the best solution.

Alternatives: you could use positioning on the image such as position: absolute; this will take it out of the flow of its parent and so ignore the padding, however you would have to know exactly where the image needs to go. Option 1 is much better.

Upvotes: 1

Related Questions