首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >流体图像:如何设置宽度和高度?

流体图像:如何设置宽度和高度?
EN

Stack Overflow用户
提问于 2011-08-14 15:40:14
回答 2查看 13.4K关注 0票数 5

我正在尝试构建一个流畅的布局,为此我使用以下内容设置大图像的样式:

代码语言:javascript
复制
.fluid_img {
  height: auto;
  width: auto;
  max-width: 100%;
}

这很好用,但问题是我不能再使用html img标记中的width和height属性(它们将不起作用)。我需要这些属性,这样浏览器才能在加载图像之前“节省”图像所需的空间,这样页面的其余部分在加载图像时就不会移动。

有没有办法同时拥有这两个功能?(流媒体图像+图像加载前保存的空间)

EN

回答 2

Stack Overflow用户

发布于 2013-04-11 03:10:34

内联样式按设计优先于样式表样式。CSS中的级联使用外部样式表(从上到下读,所以下将优先于上)、<head>中的样式(也可以从上到下)、内联样式、用户样式。有许多方法可以解决这个问题,但我不知道其中是否真的是一个好主意,因为有人问。

1)在样式表、标题或内联中设置您的固定尺寸,然后使用放置在页面下方的脚本来推翻它,以实现自动尺寸。<script>vdivid.style.width = 'auto'</script>

2)用自动标注尺寸的<div>封装固定尺寸的<img>。但这并不能真正实现您想要的效果。`

3)网络优化你的图片,这样它们就不会花很长时间来加载。

4)以像素为单位设置的尺寸通常不是在流体布局中使用的,因为它们是固定的。#fluiddiv {width:20%;height:20%;}也是如此,这就是fluid layout的工作原理。或者你可以使用em而不是%‘。em的flex基于设备的默认字体大小,而%的flex基于窗口或父元素的大小(如果它有除body或顶级包装器之外的父元素)。要获得不失真的图像,这种方式需要...我不认为你可以使用%s,所以使用em的比例与图像相同。

票数 0
EN

Stack Overflow用户

发布于 2013-05-28 02:25:37

你可以使用一个基于宽高比的百分比填充的父div,如here所述。

解决方案是丑陋的,我很惊讶,尽管流畅的图像真的很老了,但关于这个问题或优雅的解决方案却没有太多的讨论。

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7055637

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档