The goal I'm trying to achieve on my drupal 7 website is keeping an article image's border a certain size for all images (120x120) while the actual image themselves adjust according to the image style (100x100) and are middle aligned.
(I'm unable to provide example images because I don't have 10 reputation points...)
So for a portrait image the height would be capped at say 100px and the width will be whatever is the aspect ratio is.
Same thing in reverse with a landscape image, with the width being capped at 100px and the height being whatever the aspect ratio is.
All while the grey border stays a 120x120 block, and not changing according the image size.
Let me know if you need any code from my website to help with solving this.
The simplest way to achieve your goal is to use table-cell display property with vertical-align: middle on the parent div, with desired border, height and width set. Than your img should have set max-width and max-height properties to 100%. So having the HTML structure like this:
<div class="img-container">
<img src="..." />
</div>
Your CSS could be:
.img-container {
width: 120px;
height: 120px;
display: table-cell;
vertical-align: middle;
}
.img-container > img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
Codepen showing the result: http://codepen.io/anon/pen/BpeOzG
Related
I have an image of arbitrary shape and size which I want to enlarge into a containing div without changing its proportions and without cutting off part of the image.
Below is a diagram of what I have in mind:
Note that the image is sometimes centred vertically, and sometime horizontally.
If the image is always wide, I can use:
img {
width: 100%;
height: auto;
margin: auto;
}
but that won’t work if the image is narrower, as it will end up chopping off the top & bottom.
Is there a way, possibly using grid or flex, which will accommodate the image?
Use object-fit: contain for the img selector in the css,
your <img> tag will be your gray frame like in above.
the real picture will be hosted as you wish no matter what the intrinsic size of the image is and the size of the <img> tag is.
Thanks to #Terry’s comment, I found a solution using object-fit.
div#container {
background-color: #123456;
width: 480px;
height: 240px;
}
div#container>img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div id="container">
<img src="https://javascript101.webcraft101.com/images/photos/large/bromeliad.jpg" alt="Random" title="Random Image">
</div>
The main features are:
object-fit describes how the image is positioned within its container. In this case, it is wholly contained, and ends up being centred in the process, while retaining its proportions.
The width and height are set to 100% (of the container). I think this forces the image to scale into the container.
What a wonderful property!
If I have multiple images with different aspect ratios, but want them all to be resized such that the widths are equal, but the height is changed so that original aspect ratio is maintained, I can do this with JS and math but is there a short css solution?
I think that's why object-fit property comes
it really helpful in your case and it usually used with Object-position
Yes, simply set the width using CSS and not set the height and the height will be adjusted for you while maintaining the aspect ratio.
img { width: 100px }
<img src=https://i.stack.imgur.com/w5PGK.jpg">
But note the if you worry that the height may turn out to be exceedingly large, you can also use max-height to limit it. But doing so may distort the image:
img { width: 100px; max-height: 160px }
<img src=https://i.stack.imgur.com/w5PGK.jpg">
One solution is just to set a max-width and max-height on the image:
img { max-width: 100px; max-height: 120px }
<img src=https://i.stack.imgur.com/w5PGK.jpg">
and the image will be contained in the box with the proper aspect ratio.
There are also techniques such as to create a viewing box of a fixed size, and set overflow: hidden to limit the display area to the size of the box, while setting a fixed width for the image:
.image-box { width: 100px; height: 100px; overflow: hidden }
.image-box img { width: 100px }
<div class="image-box">
<img src=https://i.stack.imgur.com/w5PGK.jpg">
</div>
Here is my site: http://highcatering.wpengine.com/
At the bottom of the site, there is an image of a bride sitting on a couch.
I want that image to keep its height and width. Here's an example: http://lydialavin.com/category/colecciones/
If you see, all the images there don't change size when the screen resolution is reduced.
Any suggestions?
If i understand your question correctly, you don't want the image to be smaller than a specific value. In this case, you should set a min-width pixel value on the element. Let's say 900px:
#novia img {
display: block;
float: none;
margin: 0;
padding: 0;
width: 100%;
min-width:900px;
background-position: center center;
}
and remove the overflow-x from its container:
#novia {overflow-x: hidden;}
This way, the background won't get as small as it does now when you see it on smaller screens. Please note, though, that the element will not be perfectly centered as it is now, and some portion of the image will not be shown.
Alternatively, you could give the image a fixed value, but it wouldn't be as effective, as it would probably be too big for smaller screens.
This css will fix the width and height of you bgackground
<style>
.your-img{
background:url(img/bg.jpg) no-repeat center center fixed;
}
</style>
I am trying to make an image resizable.
I have a specific height for this image: height: 100% (inside a container) and a width: auto; (i want the width to be adapted to the height about the natural image size).
Everything works fine when i access the page, but when i resize the window, the height is correctly resized, but the width keeps its initial value, i want it to be proportional (like when i access the page for the first time) to the height.
Is there a way to do it in CSS ? If not, what is the more optimize solution ?
Here is an illustration in code:
HTML
<div class="container">
<img alt="test" src="/img/test.png">
</div>
CSS
.container {
height: 100px;
width: 100%;
}
.container img {
height: 100%;
width: auto; //i need it to be adapted to each height about the natural image's dimensions
}
UPDATE
Here is a jsfiddle
http://jsfiddle.net/CRGj6/1/
Sometime it works sometime it doesn't...
window resize affects only the width of the element but not the height. It is kinda make sense because if you resize the height, more content is scrollable that means don't do anything to width but to increase the scrollbar length (so more content to be scrolled). Assuming that you want to preserve the aspect ratio of the image,
.wrapper .container img {
position: relative;
height: auto;
width: 100%;
}
would be the solution to this problem.
My end goal is to have a fluid <img> that won't expand past an explicitly set height of a parent/grandparent element using only css.
Currently I'm doing this with a normal (max-width:100; height:auto;) fluid image and javascript by reading the height/width attributes from the img tag, calculating the aspect ratio, calculating the correct width of the image at the desired height restriction, and applying that width as a max-width on the image's container element. Pretty simple, but I'd love to be able to do it without javascript.
height:100%; width:auto; doesn't work the same as its transverse, and I've made some attempts with Unc Dave's ol' padded box and absolute positioning that function but require knowing the aspect ratio of the image beforehand and therefore cannot be applied across images that have different proportions. So the final requirement is the css must be proportion agnostic.
I know, I know, the answer to this question is probably sitting next to the unicorn farm, but I thought I'd throw it out there anyways.
The trick is to add both max-height: 100%; and max-width: 100%; to .container img. Example CSS:
.container {
width: 300px;
border: dashed blue 1px;
}
.container img {
max-height: 100%;
max-width: 100%;
}
In this way, you can vary the specified width of .container in whatever way you want (200px or 10% for example), and the image will be no larger than its natural dimensions. (You could specify pixels instead of 100% if you didn't want to rely on the natural size of the image.)
Here's the whole fiddle: http://jsfiddle.net/KatieK/Su28P/1/
I set the below 3 styles to my img tag
max-height: 500px;
height: 70%;
width: auto;
What it does that for desktop screen img doesn't grow beyond 500px but for small mobile screens, it will shrink to 70% of the outer container. Works like a charm.
It also works width property.
You can use inline styling to limit the height:
<img src="" class="img-responsive" alt="" style="max-height: 400px;">