I'm trying to make a simple website with img tag, that will use the new srcset attribute. The main idea is to change the image (src) depending on the screen resolution.
Working example
The problem is with the sizes. As you can see, now it is 100vw, but it doesn't work correctly. For me, it resize img to about 80% of the screen, not 100%.
The best thing is, that when I write in CSS for img tag width: 100vw, it will resize to 100% of the screen.
Can someone help me with that? Maybe I'm doing something wrong?
The image is 1152 pixels wide, but you tell the browser it is 1500 pixels wide (1500w).
The browser then determines the image's density based on what you told it, and corrects the image's intrinsic dimensions accordingly, but since it used the wrong value for the density calculations, the image occupies 76.8% of the viewport width rather than 100% of it.
To change that, you can provide the browser with a larger resource, or tell it that the resource is 1152w.
Related
I'm trying to create a responsive web site. For that I found a nice looking template and adjusted it according to my needs.
One thing however came up where I couldn't find a solution so far - and that is resizing of images with different dimensions.
Let's say I have an image with a width of 600px and one with a width of 500px.
My screen size is 700px. I want both images to be shown at their native width (600px & 500px).
Now I reduce my screensize to 550px. I want the 600px image to be resized to 550px. No changes to the 500px image because the native width is still smaller than the screen.
Now I reduce the screensize to 400px. Both images should now also be reduced to 400px accordingly.
I've been googling and reading here for hours but could not find an automatic solution for this.
Best thing I found is is setting <img style="width:100%;max-width:xxx px;" where xxx is the original width of the image. But... I'd have to do this manually for each and every image!
Without max-width the image would always be strechted to 100% of the screen size.
As an alternative I found some JavaScript that calculates the original width of the image and could be used to fill out the max-width value.
If someone disables JavaScript (EG by using NoScript browser adddon) the whole thing wouldn't work.
Since I'm printing out my website using Perl I could do the calculation with Perl as well. That would help against disabled JavaScript. But still...
Are there really no better solutions? Do I really have to calculate the max-width for each and every image?
Here's the current work-in-progress: https://www.digioso.org/html5up-striped
The template features an image fit class that basically sets the width to 100% of the container and then I added the same image using width=100%;max-width=400px .
The image fit makes the image always use 100% of the screen which I don't want.
Thanks a lot!
Do not apply an explicit width or height to the image tag. Instead, give it:
max-width:100%;
max-height:100%;
check: How do I auto-resize an image to fit a 'div' container?
If you have something like this in your css:
img {
width: 100%;
}
The image tries to assume its actual size and is automatically adjusted accordingly with the container.
If you need to resize the image when your screen gets smaller, you can use #media and define the relative behaviour.
#media (max-width: 700px) {
img {}
}
I have an image that gets displayed in various sizes on my website:
The website is responsive and the apparent image size is often the size of the browser, with some exceptions when the browser is very wide. So, the image's width can vary between 200 and over 1000 pixels.
We want the image to be displayed in native resolution on high-resolution devices (Retina).
So, our image is present in three resolutions, let's call them i1.png, i2.png and i3.png.
What I would like to do is just this:
<img src="i1.png" srcset="i1.png 420w, i2.png 840w, i3.png 1260w" />
In my opinion, the browser should have enough information to figure out which image it needs.
On a standard-resolution device (no retina screen), it just takes the width of the <img /> element and then loads the image that has a width higher or equal to the width of the element. E.g. if the image element is 600px wide, then it will load i2.png.
On a retina device, it would just multiply the width of the <img /> element with the device-pixel ratio. E.g. on a "2x" device, it would load i3.png for a 600px image, because 2 x 600 = 1200, so it would need the image with a width of 1260px.
It seems the browser indeed does something like that, but in some cases it would load the 840px image even though the 420px image would be enough.
What factors does the browser use to determine the size of the image to load?
Is it using CSS rules to determine the image's apparent width?
Or does it ignore CSS and just look at width and height attributes on the <img />, if present?
What if some parts of CSS are not yet loaded?
Crucial point: I do not want to use the sizes attribute, because I would need media queries for all possible combinations of device-pixel ratios and browser window widths. This should not be necessary, because as I said, the browser should have enough information.
I checked the Mozilla Docs about the topic, but they say that if sizes is omitted, then we need to use 2x descriptors (instead of 420w descriptors) in the srcset attribute. This is useless for my scenario: the goal is to have the browser find out which image to load, not just based on device-pixel ratio, but also based on responsiveness.
Seems that the browser does not respect any CSS to decide which image to load. After all, it is not clear which CSS files have already been loaded when the image starts loading.
Instead, it treats each image as if it was stretched to the full page width. If the screen is non-retina and 600px wide, it would load the next-higher image size (840px in the above example), regardless of the actual size that the image would occupy on the screen.
For retina screens, it would just multiply the required image width by the device-pixel ratio.
I have a site where I want some full-width images (they'll be cropped vertically, for a parallax look). I want to I've read a bunch of articles on srcset and sizes and tried a few things, but I can't figure out (a) whether I need to use "sizes" at all, and (b) especially without sizes, how the browser will choose which image to load.
For concreteness, here's an image spec:
<img src="/images/full/2c8n.jpg" srcset="
/images/320/2c8n.jpg 320w,
/images/640/2c8n.jpg 640w,
/images/1024/2c8n.jpg 1024w,
/images/full/2c8n.jpg">
This is in a full-width container div so the image should go edge to edge.
I'd like it to load the smallest one on mobile and the largest one (the /images/full one) on big desktops, but that doesn't seem to be happening. I've seen that it's possible to use x style as well, but I'm not sure how I'd choose which image to use with each scale factor, if that's even the right way to do it. Any idea what I'm doing wrong and what's the proper way to do this?
The documentation is pretty unclear about the sizes attribute. What I've been able to determine is that it only affects what size to render the image, and NOT image selection. So, sizes="(max-width: 500px) 50vw, 100vw" tells the browser:
if the viewport is up to 500px wide, render the image at 50% of the viewport (50vw)
if the viewport is 501px or larger, render the image at 100% of the viewport (100vw)
For the srcset attribute, the browser takes a look at your list of images, guesses at what size the slot is it should fill and then chooses the next size up. So, edge to edge as per your requirement, this is how it would choose which file to use:
Viewport width up to 319px -> /images/320/2c8n.jpg
VW 320px to 639px -> /images/640/2c8n.jpg
VW 640 to 1023 -> /images/1024/2c8n.jpg
VW 1024 and larger -> /images/full/2c8n.jpg
I've also read, but haven't verified yet, that it uses the first image it finds that fits the requirements between the src and srcset tags. The order of the attributes may make a difference. Again, read but not verified.
I want a page with a fixed pixel size to always have the same percantage hight. I cant just use % or any other relative units since I already made the whole site in pixels.
Means when I have a div with a hight of 1500px and view it on a 1366x768 screen the whole 1500px div should still be visable completely.
The effect I want to accomplish is something similar to a browser zoom.
You could try min-height: 1500px; on the div, then put overflow-y: auto on the body or html elements.
If you want something to dynamically resize depending on the window height you'll want to look into either CSS flexbox, using the vh sizing, or using javascript to detect window resizing.
You could use the viewport meta tag for that. Just remove the "initial-scale=1" part and the page should always be rendered to fit the screen.
You should note that this might result in the page being shown very small which can lead to problems when people want to access it with a smartphone for example. If you want to optimize your page for different devices and screens, I suggest you make yourself familiar with responsive webdesign.
Something like height: 100vh; would make the object's height 100 percent of the viewport height. It seems like there is no way around switching from px to something else.
I am totally fresh to html language. In the image attached in the html, something we need to specify the width of the image by the following tag
<img width=350 src='/var/tmp.jpg'/>
So what is unit of the width here? I guess it is in pixel? If that's in pixel, does it mean that the size of the image actually relative to the resolution of the display? I open a webpage with a image shown in the width of 350 in different machine with different display of different resolution. I measure of the width of the image shown on the screen, they are the same. So is that any way to I figure out the absolute width of the image in cm or mm (in php)?
pixels. the answer must be 30 chars long. so I'm typing more.
you can't really work out the absolute width/height in the end display. If you are targeting a specific resolution /screen size then you can work backwards.
users can change their screen resolution with ease, so that affects how big/small the final result is. As a rough guide, its 96dpi (dots per inch), while new iphone displays can be over 300dpi.