I'm making a responsive blog for both mobile and desktop users (all in one). With respect to image resizing, I understand that I can use width:100%; height:100%; so that they scale proportionally depending on the page size, but I've noticed that smaller images upscale to fit the width of the DIV that it is in. Let's say my DIV has a max-width of 640px but an image I include within it in 500px.
What CSS can I use to keep the image at 500px and then scale down proportionally if the resolution width falls below 500px?
The reason I'm asking this is because not all images in posts may be 640px wide.
Set your image max-width property to the actual image size.
Why don't you just set max-width:100% and leave width off.
Related
I made a small website where width of certain elements are given in vw. It looked all good in my laptop. But when viewed in a 1920 screen, I could see the content is over stretched. I want to know if there is a way to stop viewport width and viewport paddings I have used in my website to stop stretching the elements after a while.
You can achieve this by setting max-width: value to your container in you css file
Also to set diverent styles after certain screen width you can yuse media query
#media(min-width: 1000px){
//your style
}
I'm developing a wordpress theme and I'm having a bit of a problem.
In my homepage I want a wide background image with some text centered on it. So far pretty standard.
The thing is, I want the height to stay the same and as the browser gets smaller, the image should crop from both sides accordingly so the image stay centered.
Here is a great example I found, try resizing it and look at the big image at the top:
http://www.shopstyle.com/
How can I get this effect?
Thanks in advance! :)
You can use property background-size with value cover, which was made for that purpose
cover
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
set the height you need (you can set different height for FHD, HD, Tablet, Mobile with media queries) and the image will be cropped from sides and zoomed if needed (if it's shorter than height you set)
Additionally to using background-size: cover;
You should use view port height to control the height of the image. This way it will always be a certain percentage of the view port height, no matter if it's a desktop, laptop, phone, etc. It's the more fluid way to display a height.
Example (covers the whole screen):
.yourelement {
height: 100vh;
}
Example (covers half the screen):
.yourelement {
height: 50vh;
}
Adjust accordingly.
Live demo: http://leoaivy.github.io/projects/poster_inside/html/1_P.01_login.html
Questoin: ".login-bg-wrap a img" work well on desktop with max-width set to 100%. But on narrower devices like iphone 6, the background images just scale to fit the width of view port, which make their height become smaller. I set heihgt to just 1% or 100% but they scale to their original size. I don't know why? And is there a way to make the height of these images fit the height of the site?
You need to make sure that every element, down to the images, is set to have a width of 100%. And an extra min-width of whatever number you want to stop the shrinking at applied to the image itself.
And only the width, not the height.
You could remove the max-width, make the image's height and width 100%, and give it a object-fit: cover; Is that what you are trying to achieve?
You can also use 100vw on the width, and 100vh on the height, so that way the image will always have the viewport's size.
Do we have any specific height for the initial display of the page in different devices.
I want to show a header image on load of a page, on scrolling down more content appears. For fitting the image in view area for different devices with media queries, I use width as 100% but for height I have problem in understanding?
If your width is set to 100% then your height should be set to auto. The image will be responsive and adjust to different screen resolutions without deforming.
Thankyou both!!
I used CSS3 background image properties, instead of fighting for height. Issue resolved. :)
I have an image of that has a height of 480px. On my Macbook it looks OK but when I go to my 30 inch monitor obviously there is a huge space in the bottom.
What can I do to make sure that the 480px will always be in relation so the size of the user's screen?
I did some searches and it seems that using background-image: cover or background position I can do some stuff but highly likely it's not what I am looking for. What can I do tackle this issue?
One way to achieve this is to place the image in a container that can scale with the page.
Height is a hard attribute to scale, but you can achieve it as long as all of the parent elements have a specified height as well.
You can use CSS code such as
height:40%;
to scale elements.
Scale the page's height here to see for yourself: http://jsfiddle.net/L7uWd/
Try with the width in percentage to set the image size as per the browser width. It's always preferable to set the width in percentage(instead of pixel) while re-sizing the element based on window re-sizing.
Set the image height to some percentage instead of pixel, that will automatically handle with the size of the screen.