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.
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!
I am trying to make a card element which consists of several text elements and an image. My goal is to make image only fit corresponding grid cell and not to cause it's growth. The height of grid row should be driven by text content (on the right side of the card).
I've managed to make it work on Chrome, but Firefox still allows image to be much bigger.
Here is my prototype: https://codepen.io/gmltA/pen/yLNWmrZ
Chrome:
Firefox:
I guess I'm missing something in this part of the code (which is responsible for grid item and it's contents)
.card__image-wrapper {
grid-area: img;
max-width: 124px;
padding: 4px;
img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
}
}
The most obvious fallback option here is to set image as item background, but I honestly don't want to do this, if there is another solution.
a trick would be to give a bottom negative margin to image to avoid to stretch the container past height of sibblings.
img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
margin-bottom:-100%;
display:block;
}
forked pen : https://codepen.io/gc-nomade/pen/gOpNYGj
beside the question, FF behavior seems the one to expect for my own humble opinion.
I have a portfolio page with a image display with zoom.
I have this code: http://codepen.io/Mpleandro/pen/LvrqJ
The div that shows the image has a class of .display, on line 13 of the HTML and the css formating for this div isline 90.
The image width will be flexible, so I what I want is to make the containing div inherit the width of image.
I tried the css property auto, inherit and min-with, but nothing works!
Could someone help me?
P.S.: I need a responsive solution.
Thanks
since 1 year has passed you may not be interested in the solution, but hope that helps someone else.
I also had a situation like that where I needed a div to be of the same width as the image and this had to be responsive.
In my case, I set a fixed width for the div
.some-div{
width: 250px;
}
I also had responsive image:
img{
display: block;
max-width: 100%;
height; auto;
}
and then I added a media query with threshold when the fixed width of the div started to affect the responsive nature and simply addedd this:
#media screen and (max-width: 917px){
.some-div{
width: 100%;
}
}
For my project the threshold was 917px when the fixed width started to affect.
I guess it is a solution that will fit everyone since width: 100% after the certain threshold will always be the width of the image if the image is responsive.
I don't know how to give you a perfect answer, but I can hopefully send you in the right direction. First, you can forget about inherit or min-width because they are not what you want.
auto is the default value, and I think that the default behaviour is very close to what you want: the width of the div adapt to its content. If this is not the current behaviour, this is because of many other reasons including the positioning of that div. The thing is, you won't have a proper centering and sizing of the <div class="display"> with only CSS, because it would need a specific explicit width declaration.
Since you already use Javascript to display/hide the good images, you could use Javascript to set the width everytime you change the image that is in the box.
My best advice would be to use existing solutions which are tested, approved and look really good. A 2 seconds Google search pointed me to Fesco which you could try.
I'm not sure if this is what you mean, but if it is, I hope it will help!
If you want your image to fill the div, but to scale with the browser, try setting the width of your div. Next, apply max-width="100%"; height: auto; to your image.
The simplest solution would be to just set .display to display: inline-block;, which would adjust its size to the contained image. If you want to be responsive as well, you need to define an upper limit via max-height: 80%, for example.
Put together, it would look like this: http://codepen.io/anon/pen/IluBt
JS line 17:
$(".display").css("display","inline-block");
CSS for .display
.display {
position: relative;;
background: rgba(255,255,255,0.5);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
max-height:80%; /* <-- limit the height */
top:10%;
left:0;
margin:auto;
}
And to align everything nicely:
.loader {
color: red;
position: fixed;
width: 100%; height: 100%;
background: rgba(0,0,0, 1) url(../http://www.mpleandro.com.br/images/new/loader.gif) no-repeat center center;
text-align: center;
}
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;">
So, I am trying to set an image to be 100% of the height and width of the html element (really the browser window is what I'm going for). I have the CSS set as
html{
width: 100%;
height: 100%;
}
img{
width: 100%;
height: 100%;
z-index: 0%;
}
And the width behaves right, but the height does not change. I tried setting it to height: 2% and it stayed the same height. I don't want to use px to set the height because I want this to work on mobile devices, but HEIGHT, Y U NO WORK?
You also need to set height: 100% on body.
Going with your exact example, you could do:
html, body, img {
width: 100%;
height: 100%;
}
However, it looks like you're possibly trying to get a fullscreen background image (because you used z-index - by the way z-index does not use %, just a plain number).
In that case, you should instead use one of the methods from here:
http://css-tricks.com/perfect-full-page-background-image/
That is because the image element is not the direct child of the html element. You have to specify the height for the body element also, and any other element containing the image element.