I have an image, its 120 x 90 px for example. Now I want to display a smaller version of that image, with 80 x 50 px for example. I know I can use width and height which will work for images having the same size.
Now my problem is that I have different images, which have a different original size and just using a static width and height will make some images look strange (because the proportions are messed up).
How could I handle such cases? Is it possible in pure CSS, or do I need some JS?
Thanks!
We call this dynamic divs the image will resize when de div is smaller or bigger.
An example
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}
<div style="max-width:500px;">
<img src="..." />
</div>
FIDDLE note: if you resize your browser window you see that the image is resized too.
If you make a small div the image is small too. etc.
Related
I want to display a bunch of images stored on a server. The images are taken from a user's phone and the dimensions and aspect ratio are unknown.
I just want to have an image fully fill a DIV while maintaining its aspect ratio. If the image is wider than taller, I want the image scaled so the height is 100% the Div and the sides would be clipped off. Similarly for if the image is taller than wider, I want the image scaled up/down so the width is 100% of the Div
Hopefully this explains it
I thought this would be pretty trivial, but here i am. I can make an image fit tall or wide but not either depending on the aspect ratio. I've tried several different methods and I am at a loss.
I have a Stackblitz Example here.
I have a 2x2 grid, and I would like to get the images to fill those grids. Some images need to be rotated. I'm not sure why they need to be as the look normal on my computer. I have a hardcoded flag to force a rotation on some images, but the rotation appears to screw up the css further on.
CSS:
.img-container {
/* height: 150px; */
width: 100%;
}
.img-container img {
height: 100%;
/* height: -webkit-fill-available; */
width: 100%;
object-fit: cover;
}
HTML:
<div class="showBorder img-container">
<img #image class="container-img-objfit2"
[ngClass]="{rotateLeft: rotate}"
[src]="imageURL" />
</div>
How can I fill these DIVs regardless of the aspect ratio?
Can I do any of this inside angular? I tried to get the image size and see if I could set custom class that would handle the rotation, but that didn't seem to work either. The dimension for all my pictures was identical. So no way to distinguish which pictures need rotation.
Or am I going about this all wrong? Ultimately I think I will have a process to scale and crop the images on the server so they are prepared for the client app.
Update:
This sample is an attempt to set the image in the background and use a :before selector to rotate the image. It does not work fully as I cannot change the image dynamically to other images.
You can just set the images as background-image for the div and set its size to cover.
So just remove the img tag and keep your div tag only
<div class="showBorder img-container" [style.backgroundImage]="'url(' + imageURL + ' )'">
</div>
In CSS you will have to specify the height and the size
.img-container {
height: 150px;
width: 100%;
background-size:cover;
}
I'm using centered imgs to act as backgrounds for some tiles. I'm trying to have these images scale with their parent div's height and if they are wider then their parent's for them to hide the overflow.
Example:
* I've got it working now. Answers are below, I'm updating this code to display all I needed to use to get it to work *
HTML
<div class="container">
<img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>
CSS:
.container {
height:250px;
width:50%;
}
.derp{
object-fit: cover;
height: 100%;
width: 100%;
}
Here's a near-example: http://codepen.io/chriscoyier/pen/myPMGB
The difference would be that I'm using s and not background-image, and that instead of the img filling the div completely it would fit to the height and hide the width overflow.
I'm trying to avoid using background-image since I'm using a lot of these tiles and making CSS rules for every one isn't going to work.
In order to scale it with the div's height, I'd change the height from px to % - this way, the larger's the div, the larger's the picture. In order to certain the image, i'd use margin in the image css. That'd look like so:
.derp{
height:80%;
width:80%;
margin:10%;
}
.container {
height:250px;
width:50%; /* needed */
/* inner img is centered horizontally */
vertical-align:top;
text-align:center;
overflow-x:hidden;
}
<div class="container" style="background-color:gray"> <!-- The background is there so you could see the image relative to the div -->
<img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>
The best way to keep the aspect ratio of the image is to set the width to auto (and it's the default behavior so you don't need to set explicitly). And with a simple overflow:hidden it works almost as you want it.
The hard part is centering horizontally. You can try this answer :css to center a image horizontally.
However if all your images aren't the same size, you will need to make one rule per image. And in this case putting the image as background-img would be better for semantic and accessibility (because your image doesn't have a sense in the page, it doesn't convey any information, it's decoration). An <img> would be read by a screen reader (the alt attribute), and in your case it wouldn't help a blind people.
Depending on how many browsers you need to support, I'd suggest you use object-fit! Support for it is okay if you can ignore IE, but in case your project qualifies, I see no problem with using it today. Also, there is always a polyfill.
You can find a nice summary on CSS-Tricks.com about the property. It basically works similarly to background-size, but for <img> tags. In your case, object-fit: cover; does the trick.
I made a little demo on CodePen that shows you how it works.
img {
height: 100%;
object-fit: fill;
width: 100%;
}
Using a responsive fluid grid and images are 800px x 500px
Problem: When images load, the footer as it the top and is pushed down while the images are loading in.
Setup: Using a div for the images and div for the footer.
Goal: To have the footer always remain in the correct position, not trying to put it in an absolute spot, just looking to have the images spacing accounted for.
Ideas: Perhaps use a transparent png at 800x500 so it loads first before the images.
Concerns: Creating a div placeholder at 800x500 might not work as these images are responsive in a fluid grid so they'll never actually be at that size unless the viewer has a huge monitor..
Final result when images loaded:
Current issue:
Goal for images to load:
When I know the aspect ratio for something is going to stay the same no matter what the width of the elements/screen is, I do something like this:
.image-holder {
display: inline-block;
width: 33.333%;
position: relative;
}
.image-holder:before {
content:"";
display: block;
padding-top: 62.5%;
}
.image-holder img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Here's a full demo: http://jsfiddle.net/serv0m8o/1/
I wrap each image in a div with a class of image-holder (which is styled to give you the 3 per row pattern that you illustrated) and make sure it is position: relative;
I then style the :before pseudo-element of that div to be the proper height of the aspect ratio that is needed. Padding in CSS is an intrinsic property, which means it is based on the width of the element, allowing you to assign a percentage which reflects the ratio. You specified 800x500 images, so (500/800*100) = 62.5% as my padding-top
Then, you can absolutely position your image to fill the full width and height of the container (which is why we set it to be position: relative;)
Doing this means that the div element is the size that the image will be, whether the image is loaded into it or not (the image itself has no bearing on the container size, since it is absolutely positioned)
The background-image is just a simple pattern that looks best at 100%.
Is there a way to prevent such a background-image from being resized when zooming the page?
zoom is browser feature and it's just enlarge everything you see in your browser so there is nothing you can do to keep the size of the images fixed
you could probably try pulling in an image into your HTML document instead:
<div id="bg-img">
<img src="images/bg-img.jpg">
</div>
then going on to your CSS, you could apply the following style to that div holding the image:
#bg-img{
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index:-4;
}
the above style set will set your image to fit nicely into any browsers and prevent the background-image from resizing or expanding up to about 3 times of the zoom. be sure to fill in the appropriate value for the min-width so that in the event that the browser is resized, the image will maintain the correct proportion by resizing or cropping off.
I have an image in the header of my website. I'd like to use a CSS property to make it stretch across the width of the browser, so that it reacts to the user adjusting the browser window size, and so that the vertical axis of the image is scaled accordingly. Is this actually something that can be done?
Percentages will keep an image the whole width, and will update the image on browser resizing.
If you want the image to always be stretch, you can use:
img {
width:100%;
}
However, that can easily make the image look like total crap. A safer way might be:
img {
max-width:100%;
}
Either way will get the image changing sizes with browser resizing. However, the second won't stretch the image past it's natural size, so it doesn't look deformed.
You can set the width and height properties to percentages (for example, a width of 100% would cause the image to stretch across your page). This can be done using CSS.
CSS can certainly stretch an image (or, at least, I've used it to do so in Firefox at the folowing url: http://www.davidrhysthomas.co.uk/mindez/borked.html):
img {height: 100%;
width: 100%;
min-height: 600px;
min-width: 800px;
}
for example.
But...I think for it to react to the viewport resizing that JS would be probably your better-friend.
Here, give this a go, just apply this CSS style to the element that contains the image. In this example the image is on the background of the page body:
body
{
margin: 0;
padding: 0;
width: 100%;
background: url(images/YOUR-IMAGE.JPG) no-repeat left top;
background-size: 100%;
}
This will maximise your image across the element. Resizing the window will scale the image to fit the browsers new window size