CSS图像在加载图像之前进行布局 [英] CSS Image Layouting before image loaded

问题描述

对于我的移动网站，我想显示不同但已知的高度/宽度的图片，但有两个限制：

• 图片应该浏览器视图的整个宽度


• 相应地调整高度（向下或向上）以保持比例

当浏览器下载图片时，使用以下CSS很容易：

 < img src =myImageURlstyle =width：100％; height：auto; /> 
  

但是因为加载图片需要一些时间，我想让浏览器下载它。因此，一旦他获取图像，浏览器就不需要重新渲染页面。我尝试了以下方法，但失败了：

  //图片在获取之前没有布局
< img src =myImageURlheight =myImageHeightwidth =myImageWidthstyle =width：100％; height：auto; /> 
 
 //图像是布局的，但是错误：height不与宽度成比例
< img src =myImageURlstyle =width：100％; height：myImageHeight; 。 /> 
  

我想在这里一些帮助。但是请在CSS中，如果我不需要，我不想使用Javascript / jQuery。

UPDATE

我想我不是唯一有这个问题的人： http://graphicdesign.stackexchange.com/questions/3274/fluid-images-how-to-set-width-and-height

正如Pete所说，你不能在下载图片之前做任何（自动）计算，因此浏览器知道它的宽度和高度。

但是，由于您可以事先确定图像的宽高比，因此您可以通过在图片周围添加额外的占位符元素来尝试解决方法，并利用这一事实： padding 以百分比形式给出的值总是基于

这样看起来像这样： / p>

 < div style =position：relative; width：100％; height：0; padding-top：50％;> 
< img style =position：absolute; top：0; left：0; width：100％;src =...> 
< / div> 
  

这是一个没有高度，但是padding-top的 div 元素 - 它将给出一个实际的高度为计算的100％宽度的50％将用于具有 2：1 的长宽比的图像 - 对于 3：1 ，padding-必须是相应的33.333％ - 等等，基本上 height / width * 100 。）

图像本身绝对位于这个相对定位的占位符内 - 确保它在文档中的相同位置显示。

唯一可能有问题的是对具有小数点的值进行舍入 - 1000个像素中的33.333％将是333.33像素，并且浏览器必须将其向下舍入到333像素。如果调整大小的图像的实际高度为334像素，则它只会流出占位符div向上跨越那个像素的区域。可能取决于实际的布局（和你的恋物癖完美的准确性）是否可以接受。

For my mobile website I want to show images of different but known heights/widths with two constraints:

• The image should take up the whole width of the browserview
• The height should be scaled (down or up) accordingly to keep the proportions

As soon as the browser downloads the image, it is really easy with the following CSS:

<img src="myImageURl" style="width: 100%; height: auto;" />

But because the loading of the image takes some time, I want the browser to layout the image before it downloads it. So the browser does not need to rerender the page, once he fetches the image. I tried the following approaches, which failed:

// The image is not layouted before fetched
<img src="myImageURl" height="myImageHeight" width="myImageWidth" style="width: 100%; height: auto;" /> 

// The image is layouted, but wrong: height is not proportional to the width anymore
<img src="myImageURl" style="width: 100%; height: myImageHeight;" />

I would love some help here. But please in CSS, I don't want to use Javascript / jQuery if I don't have to.

UPDATE

I guess I am not the only one with this problem: http://graphicdesign.stackexchange.com/questions/3274/fluid-images-how-to-set-width-and-height

解决方案

As Pete already said, you can not do any (automatic) calculations before the image is downloaded, so the browser knows its width and height.

But since you are able to determine the aspect ratio of the image beforehand, you could try a "workaround" by adding an extra placeholder element around the image – and make use of the fact that padding values given in percentage always are calculated based on the width of an element, even for padding-top/-bottom.

That could look something like this:

<div style="position:relative; width:100%; height:0; padding-top:50%;">
  <img style="position:absolute; top:0; left:0; width:100%;" src="…">
</div>

This is a div element with no height, but a padding-top – that will give it an actual "height" of 50% of the computed 100% width. (That would be for an image with an aspect ratio of 2:1 – for 3:1 the padding-top value would have to be 33.333% accordingly – and so forth, basically height/width*100.)

That should span up our placeholder even before the image is loaded.

The image itself is positioned absolutely inside this relatively positioned placeholder – that makes sure it gets displayed at the same position in the document.

The only thing that might be problematic is rounding that has to occur for values with decimal points – 33.333% of 1000 pixels would be 333.33 pixels, and the browser has to round that down to 333 pixels. Should the resized image have an actual height of 334 pixels however, it would just flow out of the area the placeholder div is spanning up by that one pixel. May depend on the actual layout (and your fetish for pixel-perfect accuracy) whether that’s acceptable or not.

这篇关于CSS图像在加载图像之前进行布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！