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);
});
}
它可以工作,但在包含许多图像的页面上可能会非常麻烦.还有其他想法吗?
html页面高度设为自动,html – CSS:响应式布局中的高度自动问题相关推荐
- CSS响应式布局(自适应布局)
CSS 响应式布局也称自适应布局,是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念,简单来讲就是一个网站能够兼容多个不同的终端(设备),而不是为每个终端做一个特定的版本.这个 ...
- java 自适应屏幕_自适应屏幕的CSS响应式布局设计技巧总结
摘要:这篇CSS教程栏目下的"自适应屏幕的CSS响应式布局设计技巧总结",介绍的技术点是"css响应式.响应式布局.响应式.自适应.CSS.设计",希望对大家开 ...
- css响应式布局_Web前端新手怎么入门 如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
- CSS - 响应式布局(一)媒体查询
目录 响应式布局 引子 理解响应式网页和响应式布局原理 媒体查询 什么是媒体查询? 什么是媒体类型? 什么是媒体特性? 媒体查询语法 仿三星官网首页 响应式布局 引子 通过前面两节的学习 CSS - ...
- CSS - 响应式布局(二)响应式栅格系统
目录 响应式栅格系统 栅格 栅格系统 响应式栅格系统 BootStrap响应式栅格系统 简单说明 利用SCSS实现BootStrap的响应式栅格系统 响应式栅格系统 栅格 在弄清楚响应式栅格系统前,我 ...
- html,css响应式布局案例练习--星巴克官网demo
前言 继续练习响应式布局,我这次选的是星巴克的官网,进行一个页面的还原,还原程度达不到100%,不过也是可以进行一个学习过程的一个练习,细节很多,本人由于初学阶段,用了一天的时间就写了一个官网首页,兼 ...
- CSS——响应式布局案例以及点击出现下拉框实现过程
文章目录 前言 一.示例图 二.实现过程 1.HTML结构 2.CSS样式 3.JS行为 总结 前言 本文主要介绍有关响应式布局的案例实现过程. 一.示例图 二.实现过程 1.HTML 代码如下(示例 ...
- 前端三件套系例之CSS——响应式布局
文章目录 1.什么是响应式设计 1-1 定义 1-2 响应式设计的优势 2.屏幕的相关概念 3.viewport 视口 3-1 什么是viewport 3-2 设置viewport 4.媒体查询 @m ...
- css响应式布局_用 CSS Grid 布局制作一个响应式柱状图
最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...
最新文章
- Groovy正则表达式复杂逻辑判断实例
- 一次业务网关用ASP.NET Core 2.1重构的小结
- Python字典列表字段重组形成新的字典
- php 登陆信息 传递,PHP传递POST信息
- Java 多线程 —— 常用并发容器
- mysql安装图解及报错解决
- 个人笔记1:display与visibility用法
- 《机器学习实战:基于Scikit--Learn、Keras和TensorFlow(第2版)》学习笔记——前言
- Git版本控制基本使用知识整理
- Spark开发:Spark大数据开发编程示例
- python取字母以及数字随机数
- linux查看执行过哪些命令,linux查看执行过的所有命令
- c++之防卫式声明和模板
- 【CTF题】使用文件包含漏洞读取网页代码
- 回溯法----图的着色问题
- 【多人会议功能】uniapp - 微信小程序 - 腾讯云
- Typora写作上传图失败怎么解决,利用图床教你解决问题
- Dubbo入门基础与实例讲解
- matlab mic系数_科学网—最大信息系数 (Maximal Information Coefficient, MIC)详解(1) - 彭勇的博文...
- yolov5控制测试视频窗口大小