html页面高度设为自动,html – CSS:响应式布局中的高度自动问题

没有固定的正确高度.如果我在css中设置固定高度,则在响应式布局中,图像将不会以正确的宽高比调整大小.

主要问题是css根据src-attribute设置的图像计算自动高度和宽高比,而不是width-和height-attribute.因此,如果有一个有宽度和高度的真实图像,一切正常.但是如果有一个空白(这只是一个拉伸的1×1图像),宽高比将无法正确计算,因为html设置的宽度和高度对css计算没有影响(但是没有css的浏览器如何显示-calculation).

我想到的一件事是只为“真实图像”设置“height:auto”,并在每个窗口调整大小时通过jquery计算“空白图像”的高度:

Test

img {

max-width: 100%;

}

.lazy-loaded {

height: auto;

}

$(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);

});

}

image.jpg

image.jpg

它可以工作,但在包含许多图像的页面上可能会非常麻烦.还有其他想法吗?

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/411275.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MVC Controller与ActionResult的返回值

Action的要求• 必须是一个公有方法• 必须返回ActionResult类型• 必须是实例方法• 不能是范型方法• 没有标注NonActionAttribute• 不能被重载(overload) Controller 提供了众多的方法让我们返回各种类型的 ActionResult。 1. View最常用的一种&…

工作380-js判断是否为空

noNull(x) {if (x "" || x undefined || x null) {return false;}return true;}

html5外置样式表,HTML5移动端通用css详解

HTML5移动端通用css下面是common.css内容/*css初始化*//*清除内外边距*/body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,img{margin: 0;padding: 0;border: medium none;}h1,h2,h3,h4,h5,h6{font-size: 100%…

LINUX下tar.gz包的安装方法

LINUX下tar.gz包的安装方法 在tar.gz的东西不多了~~~~ =============&…

工作381-兼容移动端头部

<meta name"viewport" content"widthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalable0">

目前流行的微型计算机内存的配置为,全国计算机一级考试模拟试题

出国留学网计算机等级考试网为大家提供全国计算机一级考试模拟试题&#xff0c;更多计算机等级考试资讯请关注我们网站的更新!1)根据汉字国标GB2312-80的规定&#xff0c;二级次常用汉字个数是A) 3000个 B)7445个 C)3008个 D)3755个2)在下列字符中&#xff0c;其ASCII码值最小的…

insert 和 insertSelective的区别

使用逆向工程生成的代码做一个添加时通常都会给出两个答案&#xff0c;如题目想要增加一条数据会让你选择insert或者insertSelective 两者的区别在于如果选择insert 那么所有的字段都会添加一遍即使没有值 <insert id"insert" parameterType"com.ego.pojo.Tb…

事务处理

第13章 事务处理 事务处理是包含一个或多个任务的一组关联操作的提交或回滚操作。在事务执行的过程中&#xff0c;保证事务具有基本的ACID属性&#xff08;原子、一致性、隔离和持久性&#xff09;。.NET Framework的事务管理支持多种事务处理方式&#xff0c;包括显性事务和隐…

工作382-vant弹框不能直接用

this.$toast.success("当前所填项不能为空")

为多孔介质的当量直径_多孔介质流建模简介

拥有一款先进的多孔介质建模工具&#xff0c;是许多行业的刚性需求。COMSOL Multiphysics 软件 5.5 版本新增的附加产品——多孔介质流模块&#xff0c;可以满足众多行业的需求。使用该模块可以定量研究多孔介质中的质量、动量和能量传递。该模块适用于燃料电池、纸浆和纸张干燥…

北航计算机网络 传输层实验,北航研究生计算机网络实验_实验七 传输层实验

** 这个实验我没有约到没有问题的机子(连续三台机子都是坏的...)因此仅供参考1、根据2.6中步骤3回答&#xff1a;TCP的连接和建立采用的是&#xff1a;三次握手方式&#xff0c;PCA是主动打开方(C)&#xff0c;PCB是被动打开方(S)。先点击发送再点击接收&#xff0c;会出现什么…

学习,学习javascript

学习javascript,时常看看这个朋友的博客&#xff1a;http://hi.baidu.com/mataofq/blog/category/Javascripthttp://www.zzsky.cn/build/content/543.htmhttp://www.zzsky.cn/build/content/1213.htm 转载于:https://www.cnblogs.com/xinzhuangzi/archive/2009/09/30/4100668.h…

python 竖线 绘图_Python可视化 | Seaborn5分钟入门(二)——barplot countplot

Seaborn是基于matplotlib的Python可视化库。 它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matplotlib的基础上进行了更高级的API封装&#xff0c;从而使得作图更加容易&#xff0c;不需要经过大量的调整就能使你的图变得精致。注&#xff1a;所有代码均在IP…

计算机网络工程综合布线目的,弱电工程综合布线系统与计算机网络布线系统有何不同?【网络综合布线】...

弱电工程的综合布线是模块化和灵活的建筑物或建筑物之间的信息传输通道。 综合配电系统可以连接到声音设备、数据设备、开关设备和各种控制设备和信息管理系统。 同时&#xff0c;它还使这些设备与外部通信网络连接起来。弱电工程综合布线系统与计算机网络布线系统有何不同..弱…

课堂练习-水帖之王(水王)

今天的课堂练习是关于众数的查找。但是在这个枯燥的算法上&#xff0c;老师提出了一个很有意思而且很贴近我们日常上网生活的情景&#xff1a;有一个网友&#xff0c;他在一个吧里发帖数最多&#xff0c;而且占到了一半以上&#xff0c; 现在给出所有的帖子以及帖主的姓名&…

group by 与 order by

group by 1.对重复的数据合并分组,(group by a,b a列和b列的行数据相等才会合并)2.分组筛选(having\聚合函数)3.对各分组数据进行统计(聚合函数) order by order by a,b (先按a排序再按b排序)转载于:https://www.cnblogs.com/Ewin/archive/2009/10/05/1578293.html

只腐蚀毛刺 腐蚀算法_图像的腐蚀 膨胀及细化

转载&#xff1a;http://blog.sina.com.cn/s/blog_4bdb170b0100sgtj.html今天所讲的内容属于一门新兴的学科&#xff1a;数学形态学(Mathematical Morphology)。说起来很有意思&#xff0c;它是法国和德国的科学家在研究岩石结构时建立的一门学科。形态学的用途主要是获取物体拓…

计算机专硕专业课单科分数线,计算机考研|这两所自划线,单科没过线也能复试?...

原标题&#xff1a;计算机考研|这两所自划线&#xff0c;单科没过线也能复试&#xff1f;东南、浙大&#xff01;单科没过线也能复试&#xff01;关注量子考研公众号&#xff0c;获取最新计算机考研咨询1.东南大学&#xff1a;统考考生(不含报考苏州联合研究生院考生和管理类联…

Saltstack_使用指南17_salt-ssh

1. 主机规划 salt 版本 1 [rootsalt100 ~]# salt --version 2 salt 2018.3.3 (Oxygen) 3 [rootsalt100 ~]# salt-minion --version 4 salt-minion 2018.3.3 (Oxygen) salt ssh文档 https://docs.saltstack.com/en/latest/topics/ssh/index.html 2. salt-ssh实现步骤 2.1. 部署s…