Question

Longshot ......我不认为这是可能的，但我以前一直感到震惊！

我锚定标签，所有这些都有背景图像，全宽300px，但它们的高度都各不相同。无论如何设置这些而不必实际输入高度？将其设置为bg url的尺寸？

谢谢！

我不认为人们理解 - 我提出质疑的错误。

以下代码为例：

#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>

我想不设置高度，它只使用CSS自动设置。我不想使用图片标签。

我不确定这是否可能，我不认为。

由于

Answer 1

这样做的一种简单方法是添加这样的图像，然后隐藏我使用visibility:hidden http://jsfiddle.net/gztpsfkw/1/

我刚刚看到你不想使用<img>标签，但是在这里，图像被隐藏起来，占用了空间。

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

并应用css

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

img{
visibility:hidden;
}

Answer 2

我们可以使用visibility: hidden方式：

<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;}

小提琴：http://jsfiddle.net/praveenscience/vhjxfgtw/

JavaScript解决方案

程序

要动态设置height，您需要使用JavaScript。因此，您可以通过添加<img />标记并通过设置src来计算值来获取计算值。伪代码应该是这样的：

获取background-image。
将其附加到DOM中的新<img />元素。
获取新height元素的<img />。
设置假背景height的{{1}}。

的JavaScript

<div>

小提琴：http://jsfiddle.net/praveenscience/rcL3xj0x/

如果您不想使用内联CSS，可以使用：

$(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);
});

Answer 3

如果您正在寻找一种方法让背景图片填满所有可用空间，请使用background-size: cover

Answer 4

我认为你正在寻找类似的东西：

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;  
}

或者，如果您需要缩放图像的宽度：

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;  
}

Answer 5

旁注： <a>标记不是块级元素。为了使<a>具有高度和宽度，您需要将其设置为块级元素以显示背景图像。

您可以使用：display: block

现在提出您的问题 ...为了获得背景图片，无需手动输入，您可以使用一点jquery来改善生活更容易。我已经修改了你的CSS和HTML一点点来容纳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>

这是jquery。它将遍历所有图像并根据您的背景图像设置高度

$(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 - 从背景图像自动设置高度宽度？

5 个答案:

小提琴：http://jsfiddle.net/praveenscience/vhjxfgtw/

程序

的JavaScript

小提琴：http://jsfiddle.net/praveenscience/rcL3xj0x/