HTML/CSS -自动设置背景图像的高度宽度？

Question

不太可能。我不认为这是可能的，但我以前也感到震惊！

我锚定标签，所有这些标签都有背景图像，都有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来计算值来获得计算值。伪代码应该是这样的：

1. 获取将其background-image.
2. Attach到DOM中的新<img />元素的计算值。
3. 获取新<img />元素的代码。
4. 设置伪背景D23height >

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

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

如果不想使用内联CSS，可以使用以下代码：

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

Answer 3

如果您正在寻找一种方法来使背景图像填充所有可用的空间，那么使用background-size: cover