处理具有不同尺寸的延迟加载图像的宽高比以避免内容跳跃
[英]Handling aspect ratio of lazy loading images with different dimensions to avoid content jump
问题描述
With the help of padding-top: calc(height / widht * 100%); 
在padding-top: calc(height / widht * 100%);的帮助下padding-top: calc(height / widht * 100%); I can handle lazy loading images to avoid content jump. 我可以处理延迟加载图像以避免内容跳转。
But this solution works perfectly only when all the images are in same dimension. 但是，只有当所有图像处于相同维度时，此解决方案才能完美运行。
How can we handle content jump when rendering different dimension images? 在渲染不同尺寸的图像时，我们如何处理内容跳转？
FYI: For lazy loading images i'm using lazysizes 仅供参考：对于延迟加载图像我正在使用lazysizes
.wrapper { position: relative; height: 0; padding-top: calc(100 / 411 * 100%); } .wrapper_img { position: absolute; top: 0; left: 0; max-width: 100%; height: auto; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div> <p>Test 001</p> <div> <div class="wrapper"> <img class="wrapper_img" src="https://placehold.it/411x100" /> </div> </div> Test 002 <div> <div class="wrapper"> <img class="wrapper_img" src="https://placehold.it/150x100" /> </div> </div> Test 003 <div> <div class="wrapper"> <img class="wrapper_img" src="https://placehold.it/411x600" /> </div> </div> Test 004 </div> </body> </html>
2 个解决方案
解决方案1
0 2019-08-15 10:35:35
@sravis are you dealing with a limited set of aspect ratios? @sravis你在处理一组有限的宽高比吗？ If so, then you can just use different classes for each aspect ratio. 如果是这样，那么您可以为每个宽高比使用不同的类。 If not, then setting the img 's, height and width upfront can prevent content reflow. 如果没有，那么预先设置img ， height和width可以防止内容重排。
解决方案2
0 2019-08-20 15:57:24
As you don't have a set of aspect ratios, you will need the image sizes (or aspect ratios) if you render the html. 由于您没有一组宽高比，因此如果渲染html，则需要图像大小（或宽高比）。 Specifying the image width/height attributes is nice but won't solve your problem. 指定图像宽度/高度属性很不错但不能解决您的问题。
What you can do 你可以做什么
One Idea would be to provide the aspect ratios to your wrapper div as inline style using your implementation using the padding-top.
一个想法是使用padding-top使用您的实现为您的包装器div提供宽高比作为内联样式 。 Another idea using inline-styles with custom css variables as those are broadly supported .
使用带有自定义css变量的内联样式的另一个想法得到广泛支持 。 Take a look at the snippet. 看一下片段。 This is an example that has a fixed wrapper width with a border and upscales the images. 这是一个具有固定包装宽度的示例，带有边框并对图像进行放大。
Whatever you decide to use 无论你决定使用什么
- take care of broken images, which might break your aspect ratio. 处理损坏的图像，这可能会破坏您的宽高比。
- Images that are too small to fill your whole wrapper will look a little bit lost in your layout. 太小而无法覆盖整个包装的图像在布局中看起来有点丢失。 Either use object-fit and object-postion to fix this - or just ommit the max-widh like in the snippet to scale them up. 使用object-fit和object- postion来解决这个问题 - 或者只是在代码片段中省略max-widh来扩展它们。
/* css for wrapper only for demonstration purposes and not really needed */ .wrapper { width: 300px; /* just to limit the size */ border: 1px solid black; box-sizing: border-box; } /* tricky stuff starts here */ [style*="--aspect-ratio"] { position: relative; } [style*="--aspect-ratio"]::before { content: ""; display: block; padding-bottom: calc(100% / (var(--aspect-ratio))); } [style*="--aspect-ratio"] > img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div> <p>Test 001</p> <div> <div class="wrapper" style="--aspect-ratio:411/100"> <img class="wrapper_img" src="https://placehold.it/411x100" /> </div> </div> Test 002 (broken by intention) <div> <div class="wrapper" style="--aspect-ratio:150/100"> <img class="wrapper_img" src="https://broken-placehold.it/150x100" /> </div> </div> Test 003 <div> <div class="wrapper" style="--aspect-ratio:411/600"> <img class="wrapper_img" src="https://placehold.it/411x600" /> </div> </div> Test 004 <div> <div class="wrapper" style="--aspect-ratio:150/100"> <img class="wrapper_img" src="https://placehold.it/150x100" /> </div> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.