I have a site that has a bunch of different images to display, all of different resolutions and aspect ratios. Is there an easy way in CSS to resize and crop images to a certain resolution? For my purposes, I want the resized image to be 280x280.
Of course I can just set <img height = '280' width = '280' /> but this will stretch it. I'd like it to the smaller of the two resolutions, make a square, and then take the center pixels. For example, if the resolution is 480x200 I want it to take a 200x200 section out of the center of the image.
I've tried Googling, but to no avail.
a "real crop" of images with css isn't possible. Real Crop means the the image is reduced to the new values and also it's size is smaller then before.
But there is a solution with negative margins or absolute positioning, which will help you a lot. I've used this technique many times.
Please take a look at:
Cropping images with CSS
You could use the clip property, meant to crop elements.
I wrote a tutorial about it a couple of weeks ago at Codrops: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/.
If you set the image as a CSS background, you can use background-size: cover|contain.
I actually came across this same problem recently and ended up with a slightly different approach to the background-image way. The other main difference is that my way doesn't assume to know the width and height of the image - so it will work dynamically with any image. It does require a tiny bit of jQuery though to determine the orientation of the images (I' sure you could use plain JS instead though).
I wrote a blog post about it if you are interested in more explaination but the code is pretty simple:
HTML:
<ul class="cropped-images">
<li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li>
<li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li>
</ul>
CSS:
li {
width: 150px; // Or whatever you want.
height: 150px; // Or whatever you want.
overflow: hidden;
margin: 10px;
display: inline-block;
vertical-align: top;
}
li img {
max-width: 100%;
height: auto;
width: auto;
}
li img.landscape {
max-width: none;
max-height: 100%;
}
jQuery:
$( document ).ready(function() {
$('.cropped-images img').each(function() {
if ($(this).width() > $(this).height()) {
$(this).addClass('landscape');
}
});
});
You can set the size of all images on your website with CSS:
img {
width: 280px;
height: 280px;
}
The problem is, that some images will look strange because of their aspect radio.
The best thing would be to create different sizes of each image (better known as thumbnails) when you upload them. Noot on runtime, that would take to long.
Related
My website hosts a lot of images of all sizes. These images are responsive and change size at all browser widths from desktop to mobile. I see in my Google Search Console that I have a poor CLS (cumulative layout shift) of .25s. The layout of my website shifts as the images load.
Since my images are responsive, I can't specify exact sizes of the images, or have placeholders to reserve the space.
What is a modern way to prevent CLS with responsive images?
Layout here: https://jsfiddle.net/exspwgab/
Update: I tried one suggestion on the internet which is to specify the image file's width and height within the img tag like:
<img src="photo.jpg" width="1504" height="752">
And then in CSS you do:
width: 100%;
height: auto;
This didn't seem to work in any browser. And the elements on my webpage still moved all over as the images loaded.
If anyone has a solution that works in all browsers please let me know. I essentially need placeholders to hold the space while the images load to prevent the page jank issue.
JSFiddle of my responsive layout here:
https://jsfiddle.net/exspwgab/
I am not sure if this is exactly "a modern solution" to the CLS issue but just trying to be helpful as much as I can.
Obviously, it's not logically possible to put constant-sized placeholders for the responsive image elements. What if we use placeholders/elements with fixed-sizes for the responsive contents?
For example:
img.placeholder-image {
width: 100%;
height: 256px;
object-fit: contain;
}
With the fixed-height, this element won't add up anything negative to the CLS policy while keeping the whole image content inside the element itself even if the viewport gets resized.
I'd very much suggest you consider using <div>s instead of <image> elements to display image contents (using background property), however, I can't vouch that's not another violation of audit rules.
My two cents.
HTML:
<img width="300" height="450" src="300x450.jpg">
CSS:
img {
height: auto;
aspect-ratio: 2/3;
max-width: 100%;
}
Target browsers:
Chrome 88+
Edge 88+
Articles:
MDN
Caniuse
I had absolutely same problem.
Solution is change width: 100% to max-width: 100%
this is implicitly stated on https://web.dev/optimize-cls/
img {
width: 100%; /* or max-width: 100%; */
height: auto;
}
If you need to do what you're doing... don't worry about it.
Tools that identify potential problems with your site don't know the context. For example, suppose my site had a huge 20 MB image that took several seconds to load. Google's tools would undoubtedly flag this as a problem. But, maybe in my example, my site is hosting scientific imagery or something that requires a lossless large image size. My users would happily spend a few seconds loading the data they need.
If the layout of your site requires that you load images that are then resized dynamically, then that's what it requires and you shouldn't worry about it.
I ended up using the solution found here:
http://davidecalignano.it/lazy-loading-with-responsive-images-and-unknown-height/#:~:text=And%20here%20is%20the%20formula,flashes%20on%20lazy%20loaded%20images.
HTML
<a class="thumb lazy-container" href="#">
<img class="lazy" data-original="image.jpg" alt="">
</a>
CSS
.lazy-container {
display: block;
position: relative;
height: 0;
}
.post .lazy-container {
padding-bottom: 55.3%;
}
.lazy-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Since all of my images have a different height, I put the padding-bottom percentage as an inline style for each image.
I have a folder full of thousands of image and I want to show those images.
I've done that already, but my problem here is wit hthe size of the images.
The images in my folder are totally different format and size.
I've succeeded to resize them all but whenever I do that, when I change the browser size they don't resize aswell, they stay like I told them to.
What I want to do is put a maximum size that if the browser is big enough they are this size. But if the browser shrinks, they react instantly to that and change size.
I've tried for 2 hours now and I can't find a way to do that.
PS: I'm using bootstrap
Thanks ! :)
How about this? The images will be a maximum size of 1000 pixels, but will be 100% of the browser width otherwise.
img {
width: 100%;
max-width: 1000px;
}
The following should give you what you're looking for:
img {
height: 100%;
width: auto;
max-height: (put max height here in px)px;
}
As long as your images aren't smaller than their containers, this will work.
Add class="img-responsive" to your <img> tag. See this for details.
you could use the class img-responsive, that bootstrap offers
http://getbootstrap.com/css/#images-responsive
Your answer is this JSFIDDLE.
img {
display: block;
width: 100%;
max-width: 800px;
}
I have an image with an original size of 900x300. I have an image container that has a size of 320x180. When I show this, the image looks squezeed. I understand it's because the ratio is not the same. So I am planning to show a zoomed version of it, but with just manipulating it's CSS. Is it possible? Also open to any other ideas that can show this image nicely using CSS tricks without having it looked squished in this box.
Here's a fiddle to play with. I am currently setting the width and height to 100% and hide overflow's.
It's because the ratio of your image is 3:1. You need to make your container size 3:1 as well... if you want your width to be 320px, then you have to set your height to 106px (106.6px to be exact), or something else proportionate to your original image. Here's an updated fiddle.
.boutique-grid .box-container {
position: relative;
height: 106px;
width: 320px;
}
You'll notice it's now proportionate.
If you want a zoomed version then you can use css background property in css. Here is the code if this is what you wanted:
.box-container {
position: relative;
height: 180px;
width: 320px;
background:url("http://cf.shopious.com/images/store_logos/original/9f84c96905ade833f48054cda524c7960dc0f424.png") no-repeat;
background-position:-500px -50px;
}
and remove the img from html.
this gives the effect of zooming
Your Question don't supply that what type of zoom you wants, But I can give you an idea, If you want that the image should be zoom at their place, with the full size then use follwoing CSS with the hover property:-
.boutique-grid .box-container:hover {
position: absolute;
width:900px;
height:300px;
}
See the fiddle here:-http://jsfiddle.net/npsingh/3m9aK/6/show/
Also If you like to provide a zoom with the popup then you can achieve this by following link:-
http://cssdemos.tupence.co.uk/image-popup.htm
If you want to crop the image with the center property and then use in that continer then you should be crop the image with the margin property, by that way you can crop your image with the same aspect ratio. See the post below:-
http://www.squareonemd.co.uk/how-to-crop-an-image-with-a-css-class/
Let me know if it will works...
.box-container img {width:100%;
height:auto;}
Add above code to your css. So that image will not squezeed.
Just remove the image element from the HTML and use background-image in your CSS instead.
Then you can use the cover argument for the background-size. This will take care of zooming the image to fit the box as well as keeping it proportional:
.boutique-grid .box-container {
position: relative;
width: 320px;
height: 180px;
background-image:url(...);
background-size:cover;
background-position:center;
}
MODIFIED FIDDLE HERE
With this approach you won't need to worry about re-calculating the sizes as the browser will do it for you.
Use the background-position to fine-adjust its position.
More details on background-size:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
I'm certainly no CSS guru, but I am working on a problem where I'd like to make copying of images just slightly more burdensome for users. Sure, they can still easily be retrieved, but this makes it so you can't just drag/drop them on your desktop. Basically, I had a bunch of markup like this:
<img width="400" src="my image.png" class="foo" alt="foo">
Instead, I decided to put this into a background image and change the element to a div:
<div width="400" class="foo">
The problem I have is that the images have a fixed width, but a variable height. This worked excellent when I was using an img tag. It doesn't have the same behavior when I use a div tag. Instead, the CSS is requiring me to force a height property to display anything at all:
This doesn't work
.foo {
display: block;
margin: 0;
padding: 0;
width: 400px;
background-image: url(myimage.png);
/* height: 200px; */
}
This sorta does:
.foo {
display: block;
margin: 0;
padding: 0;
width: 400px;
background-image: url(myimage.png);
height: 200px;
}
The problem is the height for the images are all variable as I mentioned before. So it tiles over and over if I hard code a size. The container can be a placeholder for well over 5,000 images, so setting it by hand won't do it. If I can get this div to behave exactly like the img tag did, the problem is solved.
If you are just trying to prevent people from clicking and drag/dropping, I would say put each img into it's own div with position: relative. Add another div inside that relative div that has the following style:
div.img_box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: none;
z-index: 9999; /* or anything higher than your img's z-index */
}
That will cover up the image with a transparent div.
That way the image (which is part of your content) is still syntactically correct in the html.
Everybody is of course correct in saying that they have already downloaded the images to their computers just by visiting the site.
If you're trying to prevent users from reusing your content easily, some good methods are to:
1. Use images with lower resolution to limit reuse potential
2. Watermark your images
3. A combination of both, in an image sprite.
Hacking at it will just be ugly, ineffective, and difficult to maintain.
You are just setting the background of the div, you aren't adding an image to the div. The div can be resized to whatever it won't resize to what it's background image is. Just use the tag.
The only thing you could do with CSS is add a height which would work for all images. So if you're images range from 200-250px in height, set the div to 250px. Otherwise, you'll need javascript or server-side scripting to determine the height of the image and set the the CSS.
I am using Jquery Lazy Load plugin to load images lazily when they come in the viewport of browser.
In place of the original image, I just place an animated loader gif. However because there is a difference in the dimensions of the animated loader gif & original image I see the original image shrinked in size.
I want to make the loader gif hold the entire space that would have been used by original image to be placed. (loader gif is 32*32 px & original img is 800*400px)
So I want that the image rendered by the code below should always occupy 800*400px space without the loader image scaling up to that size. I think that is possible through CSS, but I dont know how? Could you please guide me on this ?
<img class='lazy' data-original='/module_files/l.jpg' src='/loader.gif'/>
http://jsfiddle.net/uNbMN/1/
There are a lot of ways to solve this, but just using a single img tag and no js I don't think there is a very good way. You can't tell an img to center inside itself, because you are setting the actual dimensions. You could do something like this with two classes.
img.lazy {
height: 400px;
width: 800px;
border: 1px solid black;
}
img.loader {
height: auto;
width: auto;
/*You would have to account for loader dimensions here*/
padding: 200px 400px 200px 400px;
}
If you really want to do this I would consider separating 'loader' from the image completely and placing it in its own, separate element.