Can anyone explain to me the concept of images to be responsiveness? And where we should use width and height for images some told me that .it is not correct to take width and height for images can anyone elaborate.
For image Make width:100% and height: auto; that will work for responsive.
but the parent element may or may not have width. Fixed width and fixed height is good practice.
When you use responsive images in your page it means you show different sizes of an image based on screen size. for example, on mobile screen you show a smaller image and on desktop screen you display the same image but with bigger resolution. this logic can be done through html or css.
If you want fully responsive image - you can use div with background image, background-size: cover(or 100%) and background-position: center center
Related
I'm working on a website. There's one problem. The slider won't fit in the frame without stretching.
Slider Image is full width of screen and i have defined height for it.
In CSS part i have applied object-fit: cover but this crop my image
I hope you guys can help me out on this. I'd tried alot and also asked some other people but they can't help me with this.
Or Should i restrict my client to use image of that resolution only?
Yes Mostly you should restrict the client from using different ratios, or resolutions, because you are using the full width aaaaand defined height, defined height is very limiting in your case, what you can do is use
object-fit:cover;
object-fit:center;
but that doesn't stop the cropping it will just focus on the center of the image when cropping.
How do I make an image always have the same crop height. As in on this site http://deliciousproductions.com.au/ the div is 420px high. But the image extends further.
Here's the div
<div class="dpsplash">
</div>
css
.dpsplash {
background-image: url('/img/banner1.png');
background-size: auto 800px;
height: 400px;
background-position: center top;
background-repeat: no-repeat;
}
So what this does is make the image height so that when you resize the page horizontally it doesn't shift the point where you crop the image for the div height, but instead extends the width. Buuuut we run into a problem because I have to guess the image height for a full width drawing on bigger resolutions where the image won't be shorter than 400px if displayed at full width, because if a 2500x1200 image is displayed at full width on a phone, it's gonna end before the div does, looking ugly.
I feel like in maths/javascript it should be that [(current page width)/(image width)] * (image height) = (the height it needs to be) or x, so the background-size style should be background-size: auto (that formula from above?);
I know basically no Javascript, it's so confusing but I understand logic arguments.
Yea, I'm not entirely sure what you're asking and your comment didn't particularly clear that up for me.
All I took out of this is that you want the image to look similar or the same on higher resolution screens? For one, if you want to test that you can zoom out on your browser to get an estimate on what it would look like on higher dpi screens. There's also a mobile emulator as part of Chrome's devtools that will simulate higher dpi's.
As to your question, if the question is how can you maintain the aspect ratio as well as keep the image at 100% the width past 1080p, a simple solution would be to add a media query that forces width 100% past a screen width of 1920 pixels. Which would look like width: 100%;. If that doesn't look exactly right to you, you could try setting the width past 100% at a value like 150% so it takes up a similar sized portion of the screen as earlier. If that is not your question and you want the image to scale with the dpi, experiment with the values vh and vw which will do just this. They stand for viewport height and width. You can also set the maximum width, height, vw, and vh with max-height/width and vmin/max
Do you mean background-size: cover;? What it does (source):
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
What is the best approach to dealing with images whos height is much MUCH larger than their width in regards to covering the background?
The image I have is 1026x2258 (width x height) and displays HORRIBLY.
Are there any tricks to deal with this scenario? There isnt much more cropping that can be done with the image.
It should ideally fit in a div container with a height of around 1700-1800px, however with that width it has to manipulate so much that you hardly see the image.
I tend to use background-size: cover and background-position: center
That way you can see the middle of the image
I advise you to use various image sizes, it may take more work to arrange, but will load faster and can be adapted by css.
Try something like:
#media(max-width:2250px){
.image{background-image: url('../images/2258x1026.jpg')}
}
#media(max-width:1920px){
.image{background-image: url('../images/1920x1080.jpg')}
}
/*#media(max-width:1920px){ <- width of screen
.image{background-image: url('../images/1920x1080.jpg')} <- image for this screen
}*/
I'm currently working of the mobile version of a website and I want all images to fill 90% of the screen width. I think the best technique to achieve this is creating a div for every image which is using the image as background-image. The problem is that I don't know how to match the height of the div with the aspect ratio of the image. I have tried to set width: 90% and height: auto but it didn't worked.
Could you please help me?
Lennart
You have an option in CSS called background-size with the option cover:
background-size: 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. The image is automatically centered unless over-ridden by another property such as background-position.
I don't know if I might be getting the question wrong, but I don't understand why you want to use background images?
If you use a regular img-Tag, the image will keep its aspect ratio if you set it to
width: 90%
height: auto
Other than that you can keep the aspect ratio of a div-container by setting a padding-top to a percentage on a wrapper-div. That works because the percentage is calculated dependend on the width of the div. See more here: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
I am trying the carousel example here http://getbootstrap.com/javascript/#carousel with image of 1200x300. It looks fine in large screen with width more than 1200. However when I reduce the browser width the image in the carousel decrease and it looks thin.
Is there any trick to have kind of minimum height applied to the image within carousel.
You can use CSS media queries to achieve what you need.
Basically what I think is happening as I don't have any code to look at is that you have responsive bootstrap on which you need to turn off otherwise bootstrap cleverly resizes the objects on the page.
Also I noticed that if you resize the image http://placehold.it/1200x300 then it shrinks though that might not affect it at all
If you set max-width: 100%; height: auto; on the img, it will retain it's aspect ratio (i.e. remain the correct shape) no matter how narrow you make it.