HTML/CSS - Automatically set height width from background image?

Question

Longshot... I don't think this is possible but I've been shocked before!

I anchor tags, all of which have background images, all 300px wide but their heights all vary. Is there anyway to set these without actually having to type out the height? Sort of setting it to the bg url's dimensions?

Thanks!

I don't think people understand - My fault for rushing the question.

Here's code as an example:

#ex-1 {width: 300px; height: 410px; background: url('/image-1.jpg');}
#ex-2 {width: 300px; height: 420px; background: url('/image-2.jpg');}
#ex-3 {width: 300px; height: 430px; background: url('/image-3.jpg');}
#ex-4 {width: 300px; height: 440px; background: url('/image-3.jpg');}

<a href="#" id="ex-1"></a>
<a href="#" id="ex-2"></a>
<a href="#" id="ex-3"></a>
<a href="#" id="ex-4"></a>

I'd like to NOT set the height, and it set automatically using CSS only. I don't want to use image tags.

I wasn't sure if this was possible, I assume not.

Thanks

Did you consider using in your CSS the tag image for apply once and for all a single height for all future images ? If no, you can do this by typing in your CSS file : `img { height : 100px; }`. — Anwar, Nov 10 '14 at 15:38
Each image has a slightly different height - 433px, 404px, 420px etc... So I can't set them that way. I'm using CSS to set the images as background images.Usually it'd look like #example {width: 300px; height: 500px; background: url('image.jpg');} I was just trying to see if there was any way of automatically setting the height in CSS without having to do it so many times manually — Nick, Nov 10 '14 at 15:41
this can be achieved using Pure CSS and `img` tags instead of background image, if you want to use background image: consider using JavaScript to set the height dynamically — avrahamcool, Nov 10 '14 at 15:46

Akshay · Answer 1 · 2014-11-10T16:07:01.433

3

A simple way of doing this is to add an image like this and then make it hidden i used visibility:hidden http://jsfiddle.net/gztpsfkw/1/

i just saw that you don't want to use <img> tags but as for here the image is being hidden and it takes up the space.

 <a href="#"><img src="http://placekitten.com/300/301" />aa</a>

And apply the css

a{
display:block;
background-image:url('http://placekitten.com/300/301');
width:100px;
height:auto;
}

img{
visibility:hidden;
}

edited Nov 10 '14 at 16:07

answered Nov 10 '14 at 15:51

Akshay

14,138
5
46
70

1

I like `visibility: hidden;` more than `opacity:0;` , but UV for the good answer – avrahamcool Nov 10 '14 at 15:53
img elements do not have a closing slash. – Rob Nov 10 '14 at 15:56
@Rob see this http://stackoverflow.com/questions/14860492/how-to-close-img-tag-properly you can also try deleting the tag in jsfiddle then the `` will turn up red – Akshay Nov 10 '14 at 15:58
@Akshay Yes. You can do that, and it's valid, but it's ignored by browsers, unnecessary and does nothing but take up space. It's not in the spec that it should be used. So it's pointless. – Rob Nov 10 '14 at 16:01
@Rob okay got it i usually do it in fiddles because i hate it when my code shows red – Akshay Nov 10 '14 at 16:02
@Akshay don't forget to edit the CSS code in the answer as well (you fixed only the JsFiddle) – avrahamcool Nov 10 '14 at 16:03
@Akshay I'm still seeing `opacity:0;` in the answer code. – avrahamcool Nov 10 '14 at 16:05
1

@Rob: the spec says that closing slash is optional. That does not mean that you have to 'necessarily' omit that. It just means you 'may' wish to omit it. – Abhitalks Nov 10 '14 at 16:08
@abhitalks The spec says nothing about putting it on img tags except under definition of void elements which 'may' have it. However, it also says the slash is ignored and does nothing. So it has no purpose, is meaningless and pointless. Also this: http://tiffanybbrown.com/2011/03/23/html5-does-not-allow-self-closing-tags/ – Rob Nov 10 '14 at 16:10
@abhitalks i didn't do it, it was edited by someone else, and i edited after it to change something so his name is not displayed – Akshay Nov 10 '14 at 16:10
2

@Rob: img "is" a void element. and as long as the specs are not violated, such objections are just pedantic. – Abhitalks Nov 10 '14 at 16:19
@Rob: what you are quoting is not the spec. See this answer here: http://stackoverflow.com/a/23739417/1355315 and the official spec here: http://www.w3.org/TR/html-markup/syntax.html#void-element – Abhitalks Nov 10 '14 at 16:24
@abhitalks Yes, it's a void element which is an exception to the main rule. Nowhere is the img tag specifically shown to need or use the closing slash. That the closing slash is optional does not make it any more useful than before and just as useless. – Rob Nov 10 '14 at 17:16

score 1 · Answer 2 · edited Nov 10 '14 at 15:59

1

We can use a visibility: hidden way:

<a href="#"><img src="http://lorempixel.com/100/200/" /></a>

CSS

a {background: url("http://lorempixel.com/100/200/") center center no-repeat; width: 100px;}
a img {visibility: hidden;}

Fiddle: http://jsfiddle.net/praveenscience/vhjxfgtw/

JavaScript Solution

Procedure

To set the height, dynamically, you need to use JavaScript. So, you can get the computed value by adding a <img /> tag and computing the value by setting the src. The pseudo code would have been like this:

Get the computed value of background-image.
Attach it to a new <img /> element in the DOM.
Get the height of the new <img /> element.
Set the height of the fake background <div>.

JavaScript

$(document).ready(function () {
    bg = $(".bg").css("background-image");
    $("body").append('<img id="faux" src="' + bg.substring(4, bg.length-1) + '" />');
    height = $("#faux").outerHeight();
    $("#faux").remove();
    $(".bg").height(height);
});

Fiddle: http://jsfiddle.net/praveenscience/rcL3xj0x/

If you don't want to use inline CSS, you can use this:

$("style").append('.bg {height: ' + height + 'px}');

edited Nov 10 '14 at 15:59

Rob

14,746
28
47
65

answered Nov 10 '14 at 15:46

Praveen Kumar Purushothaman

164,888
24
203
252

a) he does not want to use the `` tag b) he wants a CSS-only solution – Wavemaster Nov 10 '14 at 15:48
@Wavemaster Oops. Didn't look at it! `:)` – Praveen Kumar Purushothaman Nov 10 '14 at 15:48
img tags do not have a closing slash. – Rob Nov 10 '14 at 15:58
@Rob Please check how to close the the empty tags. http://www.456bereastreet.com/archive/201005/void_empty_elements_and_self-closing_start_tags_in_html/ – Praveen Kumar Purushothaman Nov 10 '14 at 15:59
@PraveenKumar Please read the spec on how to close img tags. This is HTML, not XHTML. – Rob Nov 10 '14 at 16:02
@Rob Please provide the link, but I am keeping XHTML in mind. – Praveen Kumar Purushothaman Nov 10 '14 at 16:04
@PraveenKumar If you are writing HTML markup, why are using XHTML syntax? I am surprised I am being asked to supply a link to the spec but, notice, no closing slash: http://developers.whatwg.org/edits.html#the-img-element – Rob Nov 10 '14 at 16:07
Okay, let's make it clear. I am speaking XHTML, and you are talking HTML! `:)` – Praveen Kumar Purushothaman Nov 10 '14 at 16:08
@PraveenKumar Then you are off topic because the question deals with HTML. – Rob Nov 10 '14 at 16:14
@Rob Yes. And no one will explicitly tag something with `XHTML`! `:)` Let's stop the discussion about this, and I would love to use XHTML, because it is good for devs and machines! `:)` – Praveen Kumar Purushothaman Nov 10 '14 at 16:15
@PraveenKumar This topic is not for you to decide what should be used. However, my point is that I too often see this notion that people think elements such as img have a closing slash and I have the need to quash this misleading thought. – Rob Nov 10 '14 at 16:17

score 0 · Answer 3 · answered Nov 10 '14 at 15:38

0

If you're looking for a way to make the background images fill all the space available then use background-size: cover

answered Nov 10 '14 at 15:38

nunoarruda

2,679
5
26
50

I think the OP wants a way for the `` tags's dimensions to adapt to their background images, without using `` tags. – Antoine Combes Nov 10 '14 at 15:56

score 0 · Answer 4 · answered Nov 10 '14 at 15:51

I think you're looking for something like this:

function setBackgroundImage(element, src) {
    var img = new Image();
    img.onload = function() {
        element.style.height = img.height+'px';
        element.style.backgroundImage = 'url('+img.src+')';
    }
    img.src = src;  
}

Or, if you need to scale the images for the width:

function setImage(element, src) {
    var img = new Image();
    img.onload = function() {
        var sizeRatio = element.offsetWidth / img.width;
        element.style.height = (sizeRatio * img.height)+'px';
        element.style.backgroundImage = 'url('+img.src+')';
        element.style.backgroundSize = 'cover';
    }
    img.src = src;  
}

Ah, in that case I feel pretty confident that this is not currently possible without using image tags. — Casey Rule, Nov 10 '14 at 15:58

score 0 · Answer 5 · answered Nov 10 '14 at 16:47

Side Note: The <a> tag is not a block level element. In order for the <a> to have a height and a width you need to make it a block level element to show the background image.

You would use: display: block

Now for your question... In order to get the background image, with out having to manual type it in you can use a little jQUery to make your life a lot easier. I have modified your CSS and HTML a little bit to accomodate the jQuery.

CodePen Example

#links { overflow: hidden; }
#links a { display: block; float: left; width: 300px; height: 200px; 
    /* generic height set in case there is no background image */ }
#ex-1 {  background: url('http://www.google.com/images/srpr/logo11w.png');}
#ex-2 {  background: url('http://www.bing.com/s/a/hpc12.png');}
#ex-3 {  background: url('http://www.google.com/images/srpr/logo11w.png');}
#ex-4 {  background: url('http://www.bing.com/s/a/hpc12.png');}


<div id="links">
    <a href="#" id="ex-1"></a>
    <a href="#" id="ex-2"></a>
    <a href="#" id="ex-3"></a>
    <a href="#" id="ex-4"></a>
</div>

Here is the jquery. It will loop through all your images and set the height according to your background image

$(document).ready(function(){
    $('#links a').each(function(){
        var temp = $(this).css('background-image');
        temp = temp.replace('url("', '').replace('")', '');    

        var newImg = new Image();  
        newImg.src = temp;  

        imageHeight = newImg.height;
        imageWidth = newImg.width;  

        $(this).css('height', imageHeight);    
    });
});

HTML/CSS - Automatically set height width from background image?

5 Answers5

Fiddle: http://jsfiddle.net/praveenscience/vhjxfgtw/

Procedure

JavaScript

Fiddle: http://jsfiddle.net/praveenscience/rcL3xj0x/