How can I make the image full bleed but pad the content
You just need to modify your CSS to have this:
p, h2 {
padding:0 40px 0 40px; /*Just so that we can see why I added the 80px. (top, right, bottom, left)*/
}
img {
margin-left: -40px; /*-40px to make up for the parent's padding to the left*/
width: calc(100% + 80px); /*You need to change to this.*/
}
The image exceed to the padding area of the parent div
It's because overflow property will only hide the child of the element from the border and outwards. If you want to limit your image not to exceed the content box, you have to put some inner container or make the image to contain.
First Option
<div data-img-url="images/image7.jpg" class="p-thumbnail">
<div class="imgcover">
<img src="images/image7.jpg" />
</div>
</div><div data-img-url="images/image8.jpg" class="p-thumbnail">
<div class="imgcover">
<img src="images/image7.jpg" />
</div>
</div><div data-img-url="images/image9.jpg" class="p-thumbnail">
<div class="imgcover">
<img src="images/image7.jpg" />
</div>
</div><div data-img-url="images/image10.jpg" class="p-thumbnail">
<div class="imgcover">
<img src="images/image7.jpg" />
</div>
</div>
With additional CSS
div.imgcover{
width: 100%;
overflow: hidden;
}
If you want your image to be centered on the imgcover div you can use
.p-thumbnail{
position: relative;
}
.p-thumbnail img {
max-height: 100%;
max-width: 100%;
display: block;
margin: 0 auto;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Second Option
Change the style of the image to this to emulate object-fit: contain
.product-preview .p-thumbnail {
height: 120px;
width: 25%;
display: inline-block;
padding: 10px 5px;
overflow: hidden;
text-align: center;
}
.p-thumbnail img {
max-height: 100%;
max-width: 100%;
display: block;
margin: 0 auto;
}
CSS: Make an image to bleed outside parent container
You can float the image. Floating an image takes it out of the normal content flow, which means it won't take up space the way it normally does, but text and other inline elements will "notice" it and wrap around it.
.underline > img {
float: right;
position: relative;
top: -20px;
}
jsFiddle: http://jsfiddle.net/kgpLomct/
Or you can use absolute positioning. An absolute positioned item is completely removed from the document flow, text and other elements will act like it isn't there, and will position itself according to the nearest positioned ancestor element.
.section h5.underline {
/* ... */
/* make sure this is set! */
position: relative;
}
.underline > img {
position: absolute;
top: -10px;
right: 10px;
}
jsFiddle: http://jsfiddle.net/kgpLomct/1
With CSS, how do I make an image span the full width of the page as a background image?
If you're hoping to use background-image: url(...);
, I don't think you can. However, if you want to play with layering, you can do something like this:
<img class="bg" src="..." />
And then some CSS:
.bg
{
width: 100%;
z-index: 0;
}
You can now layer content above the stretched image by playing with z-indexes and such. One quick note, the image can't be contained in any other elements for the width: 100%;
to apply to the whole page.
Here's a quick demo if you can't rely on background-size
: http://jsfiddle.net/bB3Uc/
Related Topics
How Does Bootstrap Switch from One Class to The Next
How to Get Page Content to Stretch and Stick Footer to Bottom of Page
Hide List with One Element with Pure CSS
How to Do Math Within a Less CSS String Interpolation
Background CSS 100% Width Horizontal Scroll Issue
Mime Type ('Text/HTML') Is Not a Supported Stylesheet
Does CSS3 Offer a "Minimum-Size" Property for "Background"
No Possibility to Select Text Inside <Input> When Parent Is Draggable
How to Include "Leaflet.CSS" in a React App with Webpack
Input Doesn't Respect Flex Container Width
Why Is Fixed Background Image on Chrome Not Working
Sprites Less CSS Variable Increment Issue
How to Align One Item in The Ol to The Right While The Others Are on The Left