I am currently trying to export html pages to pdf using wkhtmltopdf, but the object-fit I use to force my images into a square doesn't work; the images end up stretched to fit the square box instead of being cropped properly.
I know for a fact that object-fit doesn't work with wkhtmltopdf, and I've been looking for workarounds (cf Object-fit: cover; alternative? ) but :
I cannot access the image directly since it's used in a template (for the background method)
I have no easy way to differentiate between horizontal or vertical images
here's the current snippet I have that doesn't work (works fine on the html though):
.class .img-box {
width: 44px;
height: 44px;
margin-right: 10px;
display: inline-block;
vertical-align: middle;
}
.class .img-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
I'm at the point where I start getting a little upset by this, so if anyone knows about a working solution, I'd be glad to know about it. Thanks
Related
I'm using the card bootstrap parameters, but my differents card-img-top resizes differently. I'm searching for css in order to make them even but trying to maintain the same quality or similar.
Try this out:
.card-img-top {
height: 15vw;
object-fit: cover;
width: 100%;
}
I am trying to use sprites for a webpage but I don't know how to work with images being double resolution. Can you pls help?
So far I am using:
.div {
display: block;
margin: 0 auto;
width: 200px; ---> they remain 400px;
height: 200px; ---> they remain 400px;
background: url(Sprite.png) 10px 0;
}
The problem is that images still show too big. Not sure how to scale them down.
Thanks
You can specify the size of the background images by using the background-size property as shown in the example at https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size.
I am trying to hide a .div in based on this page http://pdtuk.com/learn-with-rockjam/ so that the contents of the page moves up.
If I change the properties in the custom CSS in the admin panel of the to the below it functions in inspector but does not seem to update or take any effect when I preview or try and make live. Any ideas on how I can resolve?
.page_banner .background_wrapper{
position: relative;
display: none;
width: 100%;
height: 46.500rem; /* 730px */
background-position: center left;
background-size: cover;
}
I hope I understood your question correctly.
There seems to be an unknown background-image.
<div class="background_wrapper" style="background-image:url('')">
So the specified height: 46.5rem converts to empty space.
One way to solve that:
height: 0
Adding this CSS rule should help:
.page_banner .background_wrapper {
display: none;
}
That element has a defined heigth which creates the unwanted space. Adding display: none makes it invisible and removes it from the document flow. But to be on the safe side you could also add height: 0;
I'm parsing images from different APIs and I want to display it on website. But I have problem with displaying it in specific size to fit it in bootstrap list (~700x300px) Some times images are in portrait instead of landscape. Whole 700x300px space should be filled by image, but not stretched.
Approach #1
Download image to server, resize it and transform. Host from localserver instead of remote links.
Approach #2
Use some magic of AngularJS (I'm newbie on that area)
Approach #3
Use some magic of CSS/HTML5 (I'm also newbie in this)
For now i got something like this
<style>
.list {
width: 700px;
height: 250px;
overflow: hidden;
position: relative;
}
div img {
position: absolute;
}
</style>
Sorry, my English is poor, if the following statement does not fluent, please understand
I did not quite understand what you mean, but I think this can solve your problem:
.list {
width: 700px;
height: 250px;
overflow: hidden;
position: relative;
}
div img {
position: absolute;
/*Add this code*/
width: 100%;
}
Or you can set the image as a background-mage to the DIV, then set background-size to cover.
div {
background: url(images/from/api.jpg) 50% 50%/cover no-repeat;
}
Is there a way with CSS or otherwise of making an image fit within an area. Lets say I have multiple images of different sizes and I want them all to fit within a div of 150px by 100px. I don't want to scale the images though as some may be tall and others narrow I simply want them to fit within this area with the rest hidden.
I thought about using overflow:hidden but it appears to not be hidden in IE6.
Any ideas?
You should try using this:
img{
width: auto;
max-width: 150px;
height: auto;
max-height: 100px;
}
Edit: Looks like IE6 doesn't support max-width and max-height properties. However, you can implement the workaround given here: max-width, max-height for IE6
Excerpt (in case linked article stops working):
img {
max-height: 100px;
max-width: 100px;
width: expression(document.body.clientWidth > 150? “150px”: “auto”);
height: expression(document.body.clientHeight > 100? “100px”: “auto”);
}
When you say "fit within this area" with the rest hidden I feel like you want the image to not be scaled down at all and basically crop off any excess.
I might be interpreting you're question wrong, but try this and see if it produces the effect you're looking for.
.img-holder {
width: 150px;
height: 150px;
position: relative;
overflow: hidden;
}
.img-holder img {
position: absolute;
display: block;
top: 0;
left: 0;
}
<div class="img-holder">
<img src="http://img.playit.pk/vi/dH6NIe7wm4I/mqdefault.jpg" />
</div>
This won't work in IE6 (as required by the OP), but for completeness you can achieve the required effect on newer browsers using CSS3's background-size:cover and setting the image as a centered background image. Like so:
div {
width:150px;
height:100px;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
background-image:url('somepic.jpg');
}
I know this is an old one, but because I found it in search of answer for the same question, I guess it could be of use for someone else, too.
Since the answers were posted, CSS property object-fit was brought to us. It does exactly what was once requested in the question.
For reference: https://www.w3schools.com/css/css3_object-fit.asp
This worked for me:
img.perfect-fit {
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
}
It tries to do a "perfect fit" of the container, stretching itself to fit the bounds while maintaining image proportion. Haven't tested it with IE6.
JSFiddle: http://jsfiddle.net/4zudggou/
Hope I am not late to the party ;)
img {
width:inherit;
height:inherit;
object-fit: cover;
}
if however you want the full image to display, use the code below
img {
width:inherit;
height:inherit;
object-fit: contain;
}
this should do the trick.