So I've created an index page which displays all images in my database, however, the width of the images is reduced to 500px. I've added the ability to click on the image and be sent to a page that displays the image in it's real dimensions, however, I would like to limit the high of the image to the resolution of the user's screen so the image is as big as possible without actually going off the screen. Any good way to do that?
To make the div's height not larger than user's screen, just use max-height: 100vh rule.
Related
I have WPBakery installed on my wordpress website, and I have tried to have two images in a single widget in a row divided into 5 columns, the two images being in a single column.
One of the images however is a sort of a custom stylized picture frame for the other image. I managed to partially solve the issue by applying a margin of "-140%" on the top margin. Unfortunately I can't get the image to stretch out to fit the frame, also when changing the viewport to be smaller (mobile sized for example), the frame scales proportionally as it should, while the image it self shrinks.
Can anyone help me out on making the image scale proportionally with the image, and also making sure it stretches to the size of the frame?
Note: The images might not be the same resolution as the frame, but i need the image to be stretched to those dimensions.
Here is how it looks on a 1080p monitor, notice how its not stretched to the frame
When it is shrunk to a mobile viewport
In my professional opinion of over 13 years of web development in a business setting, my answer to you is use ONE image. Have a .PSD project for these. Have your image frame as one layer, and use your normal images in another layer on top. When you want to create one of these images, open up the .PSD project, highlight the image to be replaced, and import the new. You may have to crop the new to be the dimensions of the last one and play with the centering x and y. Then, save your new image at full size. It will scale down because it is ONE image, not one image with a hacktastic image background.
I have little website I'm trying to plan on building. But when I started making the background image for it, the image is made so my website is kind of scrolling web page up and down so I made it long. But now the image only shows small part of it, I trying changing resolution of my browser and I could see it but without that I cannot scroll to see the whole image.
The problem which shows that the photo is not fully shown, photo is 2160*3840 px means it is opposite of normal resolution:
If you're using CSS and adding this as a background image to the page body, then it should be an easy problem to solve (and in fact you get quite a few options).
Firstly, lets assume this is your current code:
body {
background-image:url("yourimage.png"); /* The filetype does not matter */
}
Now, as far as CSS sees it, some people viewing your site could be on phones, some on 13" laptops, or some could be viewing it on 5k desktops - if we want the image to work on all at all of these different sizes, then clearly the image is going to have to be modified in some way.
By adding the background-size property here, we can adjust how this happens:
background-size:cover; seems like the best choice for you. It will slightly crop / stretch the image to fit it (but remember, this is probably going to be beneficial).
background-size:100% 100%; will always display 100% of the image - but this will usually result in it being stretched, etc.
There are quite a few other values this property can be set to - you can take a look at them here, or read the spec on it over at MDN.
I have a website where people can upload images. I have seen that a lot of sites scale down images to thumbnail size and show that on a search page for example, until the user actually clicks on one to view it in full size.
Why is it good practice to generate a thumbnail version of an uploaded image? Why not just use img tag with set height and width?
[EDIT]: After reading a few answers, I realised that I have probably phrased my question poorly. So, what I mean is, are the images downloaded in full size, even if they have a size specified in CSS? Are they scaled down at rendering after the page has finsihed loading?
Thanks!
Larger images have larger file sizes. If you have 1MB images but only need to show thumbnails that might be 10KB in size, you'll be saving 99% of your bandwidth by only showing the full images when required.
In addition to bandwidth, clients often have limited memory... think of mobile devices. Plus, the CPU required to handle them during scrolling and what not.
If you use the img tag with width and height, that picture is still the original, the data size does not change (it only looks smaller in your browser).
If you have thumbnails, those thumbnails are smaller in data size but usually somewhere on your page you link them to the original with bigger data size.
If the user downloads the thumbnail, he'll get the small sized picture, if he downloads the original, he gets the big sized.
Note: A thumbnail is a different picture than the original.
Are the images downloaded in full size, even if they have a size specified in CSS?
Yes images will be downloaded in origin size (full size). CSS only changes view of image not main image file.
Are they scaled down at rendering after the page has finsihed loading?
No, except when there is a script to do such job.
Smaller image has smaller size = faster loading.
When user actually want to see image, you open actual image and it may wait for load.
If you have several posts on search and each has image, thumbnails will be much faster to load than original images.
If you scale down original image with css (set width and height) it will still need to load original image first.
I was told that specifying inline width and height for all images will be good for SEO and also helps the site loads faster, like so:
<img src="http://www.example.com/images/free-size.jpg" width="200" height="400" alt="random image" />
Although I can still overwrite the inline setting using height:auto;.
So that images re-size properly when in different display platforms.
But just before I go ahead and doing this just want to reassure if these statements are true. Personally I feel dubious about fixing the inline dimension and overwriting using external CSS, just sound a bit hacky to me.....
I was told that specifying inline width and height for all images will
be good for SEO and also helps the site load faster.
Yes. This has traditionally been true (at least the "site loads faster" part).
By specifying the height and width attributes of an <img> the browser reserves a space matching those dimensions for the image while it continues parsing the rest of the HTML document. Then when the browser loads the image, the reserved space is waiting and there is no need to reflow the document.
Providing this sizing data results in a faster rendering process.
In contrast, if the width and height attributes are omitted, the browser will not know the size of the image until the download is complete, which forces the browser to reflow the document, slowing down the rendering process.
Now imagine a page with 50 images with no defined width and height attributes. The performance hit could be very noticeable.
The practice above represents the traditional view of image loading.
In contrast, some people are now saying that for responsive design the width and height attributes should be avoided.
Responsive Design does not normally use any width or height attributes
The majority of responsive websites do not use width or
height because they want the images to adapt to the screen size and by
using fixed width and height using <img> which would dampen user
experience and Google has declared this one of the most important
factors.
source: https://webmasters.stackexchange.com/a/68494
So there are arguments on both sides and the decision most likely depends on your individual case. As you make your decision here are some more details:
Specifying image dimensions to improve browser performance
Image width/height as an attribute or in CSS?
I was told that specifying inline width and height for all images will
be good for SEO and also helps the site loads faster.
No, it does help loading the site faster. It helps avoid flickering when rendering the page. If you want to load your images faster, make sure they have the same size as specified in the page and use a service like kraken.io to reduce the corresponding file size.
About SEO, it's improper image size and width for the screen size that can hurt your SEO. Google may consider you site as not user-friendly and/or not smartphone friendly.
If you do not tell the browser the size of your images then it must "build" the page not once, but twice (or more times depending on how many images you have on the page). It will build it once to display all the text, and then it will wait until an image is downloaded. When one image is downloaded the browser can now determine the size of the image and will rebuild the page to wrap the text around that image. This process will happen for every image on your page.
If you just specify the image dimensions, it will already know the size of the images and can use that information to shape the page. It won't have to rebuild the page a million times.
The best approach I think is to use the aspect ratio in css.
.img-container {
max-width: 500px;
aspect ratio: 2/1;
overflow:hidden;
}
The above css will reserve a container space for the image to load and prevent reflow.
Hi I want the site tables to not move or the information in them when I make the browser window smaller.
How do I do this?
Take google.com's homepage for instance the google logo does get pushed to the site to try and fit in the window when made smaller.
Thanks!
James
Set a width on your main container element, that is the narrowest you will accept the viewport becoming before a horizontal scrollbar is introduced.