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!
Related
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
Using CSS to replace text with an image is a well known practice. CSS-Tricks has a museum of some techniques (http://css-tricks.com/examples/ImageReplacement/).
But none of these allows for replacement with a fluid image (for example, a logo that stretches across 100% of a fluid page layout). Is it possible to use CSS to do a fluid image replacement?
Almost all image replacement techniques use a background-image. And I know that you can set background-size: 100%. But it's not straightforward to get the height of the text element to scale with it's width because the browser doesn't consider the background image as part of the content.
I understand that any of the common image replacement techniques could be easily combined with media queries to incrementally change the size of the text element to specific height x width ratios that work. But that is incremental, not fluid.
I did find a blog post that discusses this (http://viljamis.com/blog/2011/fluid-image-replacement.php). But it turns out thay method actually requires putting an image in the html content. I'm looking for real text replacement.
Took some fiddling, but I figured out a way. The key is to use padding percentage to set the height, because padding-top and padding-bottom percentage is linked to container width (unlike height, which is linked to container height).
html
<h1 class="logo">The Logo</h1>
css
h1.logo {
background-image: url('logo.png');
background-size: 100%;
width: 100%;
padding-top: 29.8%;
height: 0;
text-indent: -9999px;
}
Where padding-top is calculated by dividing the image height by width.
Working example: http://jsfiddle.net/bXtRw/
I'll note that using overflow: hidden instead of text-indent: -9999px should also work. But I get unstable behavior in Firefox.
Also, using font-size: 0 instead of height: 0 produces unstable behavior in Firefox.
On the div that contains the background-image:
div {
max-width: 100%;
width: 100%;
min-height: 300px; //Adjust this number accordingly
height: auto;
}
I use a method identical to #Warren Whipple, but I usually use compass/sass. If you're not limited to using vanilla CSS, this method nicely abstracts a few pieces:
// Only works in Compass/Sass – not regular CSS!
h1.logo {
$header-logo-image: "logo.png";
background: image-url($header-logo-image) no-repeat;
background-size: 100%;
height: 0;
padding-top: percentage( image-height($header-logo-image) / image-width($header-logo-image) );
overflow: hidden;
width: 100%;
}
You should just have to replace the $header-logo-image variable with the name of your image.
In addition, I sometimes add: max-width: image-width($header-logo-image);, which will prevent the h1 from being sized any larger than its background image.
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;">
I need to center images that will be wider than the parent div that contains them. the parent div is a fixed width and has the overflow set to hidden.
<div style='overflow:hidden; width:75px height:100px;'>
<img src='image.jpg' style='height:100px;' />
</div>
I must use an image as the child element because I need to resize the thumbnail dimensions and cannot rely on background-size since it is not supported on older versions of mobile safari which is a requirement. I also cannot use javascript for this, so it must be a css solution.
One more thing to note is that widths will vary between images, so I can't just use absolute positioning on the child element at a hard-coded offset.
Is this possible?
UPDATE:
for posterity, I've just found out that this can be accomplished on the older versions of mobile safari by using
-webkit-background-size:auto 100px;
of course, the background will be set as usual using 50% for left positioning. If you need this to work on another browser, the accepted solution is probably the best, but since this question was related to the iphone, this solution is a little cleaner.
How adverse are you to extra markup? Also, is there a max size for the images? For example, if your max image width is 225px then you could try:
<div class="frame">
<div>
<img src="image.jpg"/>
</div>
</div>
.frame {
overflow: hidden;
width: 75px;
height: 100px;
position: relative;
}
.frame > div {
position: absolute;
left: -5075px;
width: 10225px;
text-align: center;
}
.frame img {
height: 100px;
display: inline-block;
}
A fiddle example here: http://jsfiddle.net/brettwp/bW4xD/
Wouldn't using a background image still work? You shouldn't need to resize it.
Does something like this make sense? http://jsfiddle.net/QHRHP/44/
.container{
margin:0 auto;
width:400px;
border:2px solid #000;
height:250px;
background:url(http://placekitten.com/800/250) center top no-repeat;
}
Well if you know the width of the div and the width of the image, you can simply do some math.
Let's say the div is width 200px and the image is width 300px:
div.whatever {
width: 200px;
}
img.someImg {
left: -50px;
position: relative;
}
We know that since the width of the div is 200 pixes, then 100 pixels will be cropped from the image. If you want to center the image, then 50 pixels be hidden past the boundaries of the div on either side. Thus, we set the left position of the image to -50px.
Example (knowing the image size): http://jsfiddle.net/7YJCD/4/
Does that make sense?
If you don't know the image size or the div size, you can use javascript to detect these values and do the same thing.
Example (not knowing the image size, using jQuery javascript): http://jsfiddle.net/K2Rkg/1/
Just for reference, here's the original image.
I want a background image that automatically fits the div size.
I have several div of the same class, each with different dimensions, is it possible to set the width and the height of the image, exactly to the dimension of the div ?
Do you think is better to use img or background-image?
P.S I don't know if is it possible to set the dimension of the background image, of course is possible for the tag img, but if I use the tag img the image is separated from the content (it dosen't overlap as a background)
Personally if you're going to modify things in this way, I think using img is better.
You can literally just set the height and width of the div if that's what you want.
<div class="box"><img src="Path/to/image.png"/></div>
and then the CSS would be something like this:
.box {
height: 300px;
width: 300px;
}
.box img {
height: 300px;
width: 300px;
}
That's one way of doing it anyway. You could also set it so that the height is 100% the size of the div, but the width is set to auto so that it scales with it. That way the image won't distort. Like this:
.box img {
height: 300px;
width: auto;
}
You could try something like this
<div style="width:200px;height:200px">
<img src="image.png" width="100%" height="100%"/>
</div>
With the background image, you'll not be able to resize the image to the exact dimensions of the div tag.