图像加载前的 CSS 图像布局

本文介绍了图像加载前的 CSS 图像布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

对于我的移动网站，我想显示具有两个约束条件的不同但已知高度/宽度的图像:

图片应占据浏览器视图的整个宽度
高度应相应地按比例缩放(向下或向上)以保持比例

浏览器下载图像后，使用以下 CSS 非常简单:

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

但是因为图片的加载需要一些时间，所以我希望浏览器在下载之前先对图片进行布局.因此，一旦浏览器获取图像，就不需要重新渲染页面.我尝试了以下方法，但失败了:

//图像在获取前没有布局<img src="myImageURl" height="myImageHeight" width="myImageWidth" style="width: 100%; height: auto;"/>//图像已布局，但错误:高度不再与宽度成正比<img src="myImageURl" style="width: 100%; height: myImageHeight;"/>

我希望得到一些帮助.但是请在 CSS 中，如果我不需要，我不想使用 Javascript/jQuery.

更新

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

解决方案

正如 Pete 已经说过的，在下载图像之前你不能做任何(自动)计算，所以浏览器知道它的宽度和高度.

但是由于您可以预先确定图像的纵横比，您可以尝试通过在图像周围添加一个额外的占位符元素来解决方法" - 并利用以百分比形式给出的padding值总是根据元素的宽度计算，甚至对于 padding-top/-bottom.

可能看起来像这样:


<img style="position:absolute; top:0; left:0; width:100%;"src="...">

这是一个 div 元素，没有高度，但有一个 padding-top——这会给它一个实际高度"为计算出的 100% 宽度的 50%.(对于长宽比为 2:1 的图像——对于 3:1，padding-top 值必须相应地为 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: https://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 图像布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！