HTML&CSS - Resize all my images - html

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;
}

Related

How can I prevent jank and reduce layout shift with responsive sized images?

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.

Adjust layout images and size

I'm trying to adjust the images and size depending the page size to doesn't go outside the grid, but I couldn't make it.
I tried add theses lines below in CSS but it bugged the others images
img{
width: 100%;
max-width: 800px;
}
The content should adjust the size of the image, but it isn't working
The image going outside the grid:
You can see the live preview here
Just give max-width for image to 100%
img {
max-width: 100%;
}
do the exact opposite you are doing
img {
width:800px; /* this is optional */
max-width: 100%;
}
OP's comment:
I already dropped it (the width:800px), but it messed with the images at right sidebar.
Then create a class something like img-resposive and for that class apply max-width: 100%. And use that class in images you want/need to
I suggest if you are trying responsive design, use 50em; instead of 800px
They are both equal (except when window is resized.)

How do I get the content (mostly images) to scale or resize with the window size on tumblr?

My blog/website is iamdonle.com
An example of what I want is 13thwitness.com
The images on mine doesn't scale and a scroll bar will appear. On his website the images get smaller with the window. I'm sure it's simple but I'm a noob. Please help!
You images are scaling down, but your logo is not!
Try:
.logo {
max-width: 100%;
}
First, you'll need to make sure your container is able to scale. Right now it has a set width of 1150px, this needs to be either a max-width or percentage based.
First, remove the width declared on #container and add this CSS:
#container {
max-width: 1150px;
padding: 5px 30px 0;
}
Then you'll need to remove the width declared for your header. You can do this by either removing the line completely (line 82 of your CSS file) or by overriding it in your 'Custom CSS' field box in the Customization screen by doing:
#header {
width: 100%;
}
Then, as others have mentioned, you'll need to add a max-width to your logo as well.
#header img {
max-width: 100%;
}
Note: when I viewed the blog you were using the "Quite Big" theme, the code above only applies to that theme.

html page loading with different image sizes and anchor links

We have an html page with different image sizes ( about 70 of them). We have a similar problem with image loading and anchor link miss similar to Why do page anchors sometimes miss?
When given the image width and height it works but is that the only solution or is there something that can be done globally as each image is different and it would be a manual process to update the image sizes.
Appreciate help!
Thanks.
I assume the problem you are trying correct is with the IMG tag. In most galleries that I have setup for clients I ussually target with css .whateverclass img{ width: 100px or 25%; height: 100px or 25%; }
Another method is to use jQuery and target the img tag and size it that way as well, but CSS is always the best method in my opinion. Let me know if I am completely off on your question.
img {
height: 15%;
max-height: 50px;
max-width: 50px;
width: 15%;
}

Resizing and cropping images with CSS

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.