How to Make The Image Full Bleed But Pad The Content

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



Leave a reply



Submit