CSS：响应布局中的高度自动问题 [英] CSS: height auto issue in responsive layout
问题描述
我在响应式布局中使用jquery延迟加载，使用空白gif作为预览图像。要获得延迟加载工作，我必须通过属性设置图像的高度和宽度。
预览图像未设置为正确的高度，因为height：auto似乎通过src而不是height-attribute来计算高度。
以下是一个例子：
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title> Test< / title>
< style type =text / css>
img {
background-color：＃000;
max-width：100％;
height：auto;
}
< / style>
< / head>
< body>
< img src =blank.gifwidth =500height =300>
< / body>
< / html>有任何想法吗？
$ b解决方案没有固定的正确高度。如果我在css中设置固定的高度，图像将不会在响应式布局中以正确的宽高比调整大小。
主要问题是css计算自动高度和宽高比从由src属性设置的图像，而不是通过width和height属性。所以如果有一个真正的图像有一个宽度和高度一切工作正常。但是如果有一个空白（这只是一个拉伸的1x1图像），宽高比将不会正确计算，因为html设置的宽度和高度对css计算没有影响（但是如何显示没有css的浏览器 - 计算）。
我想到的一件事是只为真实图像设置height：auto，并通过jquery计算空白图像的高度每个窗口调整大小：
<！DOCTYPE html&
< html>
< head>
< meta charset =utf-8>
< title> Test< / title>
< style type =text / css>
img {
max-width：100％;
}
.lazy-loaded {
height：auto;
}
< / style>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js>< / script>
< script language =JavaScript>
$（document）.ready（function（）{
resizeBlankImages（）;
}）;
$（window）.resize（function（）{
resizeBlankImages（）;
}）;
function resizeBlankImages（）{
$（。lazy-blank）。each（function（）{
var originalWidth = $（this）.attr（'width'）;
var originalHeight = $（this）.attr（'height'）;
var ratio = originalWidth / originalHeight;
var width = $（this）.width（）;
var height = width / ratio;
$（this）.height（height）;
}）;
}
< / script>
< / head>
< body>
< img data-original =image.jpgsrc =image.jpgclass =lazy lazy-loadedwidth =500height =300>
< br />
< img data-original =image.jpgsrc =blank.gifclass =lazy lazy-blankwidth =500height =300>
< / body>
< / html>
它可以工作，但在一个有许多图片的页面上可能会很麻烦。任何人都有另一个想法？
i use jquery lazy load in a responsive layout with a blank gif as preview-image. To get lazy load working i have to set a height and width of the image by attributes.
The preview-image is not set to a correct height because height:auto seems to calculate the height by the src not by height-attribute. I allways get a square.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
img {
background-color: #000;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="blank.gif" width="500" height="300">
</body>
</html>
Any ideas for that?
解决方案 There is no fixed correct height. If i set a fixed height in css the image will not resize with correct aspect ratio in my responsive layout.
The main problem is that css calculates the automatic height and aspect ratio from the image which is set by the src-attribute and not by the width- and height-attribute. So if there is a real image which has a width and height everything works fine. But if there is a blank (this is only a stretched 1x1 image) the aspect ratio will not be calculated correctly because the width and height set by html has no influence on the css-calculation (but how it shown by the browser without the css-calculation).
One thing i thought about was to set "height: auto" only for "real images" and calculate the height of "blank images" by jquery on every window resize:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
img {
max-width: 100%;
}
.lazy-loaded {
height: auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="JavaScript">
$(document).ready(function(){
resizeBlankImages();
});
$(window).resize(function(){
resizeBlankImages();
});
function resizeBlankImages() {
$(".lazy-blank").each(function () {
var originalWidth = $(this).attr('width');
var originalHeight = $(this).attr('height');
var ratio = originalWidth/originalHeight;
var width = $(this).width();
var height = width/ratio;
$(this).height(height);
});
}
</script>
</head>
<body>
<img data-original="image.jpg" src="image.jpg" class="lazy lazy-loaded" width="500" height="300">
<br/>
<img data-original="image.jpg" src="blank.gif" class="lazy lazy-blank" width="500" height="300">
</body>
</html>
It works but it could get very cumbersome on a page with many images. Anyone another idea for that?
这篇关于CSS：响应布局中的高度自动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
