html设置div页面最底,使用css让大图片不超过网页宽度

让大图片不超过网页宽度,让图片不撑破通过CSS样式设置的DIV宽度!

接下来,我们来介绍下网站在开发DIV+CSS的时候会遇到一个问题,在发布一个大图片的时候因为图片过宽会撑破自己设置的div宽度的问题。

图片撑破布局原因

1、由于浏览器版本低(微软IE6)

2、没有设置div布局的宽度

解决图片超出宽度或撑破div css布局方法

1、在文章中发布图片的时候将图片编辑缩小

2、通过对对应div的css来设置显示的图片最宽宽度 推荐

3、通过css对图片设定宽度。

通过css来解决图片撑破div布局案例

通过css来控制代码如下(cmcss是对应父级类名):

.cmcss {margin: auto;width: 600px;}

.cmcss img{max-width: 100% !important; height: auto!important; width:expression(this.width > 600 ? "600px" : this.width)!important;}这种图片第一次加载时候图片不能显示

直接通过对对应的div内的内容图片宽度设置代码如下:

.cmcss img{ width:500px;} 宽度自定,但是不推荐此方法,因为设置后此div布局内的图片将全部宽度为500px,那样将造成图片小的,被放大显示模糊。

可以通过对图片设置最宽css可以使用max-width来设置,但是IE6不支持,但是可以使用浏览器的css hack来设置代码如下

.cmcss img{max-width:500px;_width:500px;}

说明:通过其他浏览器不支持带“_”的css,但是IE6支持。刚好可以通过此css hack来实现对图片宽度的现在。这里只能克服IE6显示固定的宽度来符合其它版本的兼容性。

扩展与提高

我们看区别不同浏览器CSS HACK的代码

区别FF,IE7,IE6:

background:orange;*background:green !important;*background:blue;

你可能要问了,为什么不用“*”来代替“_”来区别IE6浏览器,这里值得注意的是ie6和IE7都会解释和识别“*”的,但是IE7对important的识别具有优先全,所以IE7在CSS代码中有important将有优先识别并成为唯一性,所以在有important时候IE7和IE6前面都可以用“*”号,但是无论带important在前或在后IE7将识别为唯一区别css hack。所以这里没有important的时候需要用另外IE6的css hack中“_”小写半角下划线。

案例如下(Blue hills.jpg图片为800像素宽的图片)

代码:

www.divcss5.com案例-图片不超过设置宽度

原始图片宽度为800PX,设置后如下图为150px

Blue%20hills.jpg

截图如下:

dbe645829ae24184d777a3599c3f9342.png

通过此方法对图片的宽度设置最大宽度为多少,css代码少方便,推荐此方法来解决图片撑破div css布局的宽度。

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

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

相关文章

css3列表属性

</head> <!--first-child--给元素中的第一个子表签改变效果--> <style> li:first-child{ background-color:#00F; } /*last-child--给元素中最后一个标签改变效果*/ li:last-child{ background-color:#0F9; } /*li:nth-child()--给指定的位置添加属性&#x…

java上机题四取三排列_java语言特性概述

一.前言 我们都知道java是面向对象的编程&#xff0c;其中四个基本特性&#xff1a;抽象、封装、继承、多态。这四个特性&#xff0c;概括起来可以这么理解&#xff0c;抽象、封装、继承是多态的基础&#xff0c;多态是抽象、封装、继承的表现。二. JAVA 语言特点 a) 跨平台&am…

LeetCode 1984. 学生分数的最小差值

文章目录1. 题目2. 解题1. 题目 给你一个 下标从 0 开始 的整数数组 nums &#xff0c;其中 nums[i] 表示第 i 名学生的分数。另给你一个整数 k 。 从数组中选出任意 k 名学生的分数&#xff0c;使这 k 个分数间 最高分 和 最低分 的 差值 达到 最小化 。 返回可能的 最小差…

django 修改html无变化,Django Pycharm 修改html后立即刷新页面

写项目时需要页面实时刷新&#xff0c;而不是频繁人肉重启项目。测试过dj-static&#xff0c;django-livereload-server&#xff0c;此处使用livereload包,简单好用。仅在debugFalse时生效&#xff0c;不过可以满足调试需求了。安装pip install livereload如果报错&#xff1a;…

C++中vector使用详细说明 (转)

转自&#xff1a;http://blog.chinaunix.net/uid-26000296-id-3785610.html http://www.cnblogs.com/mr-wid/archive/2013/01/22/2871105.html 一、向量的介绍 向量 vector 是一种对象实体, 能够容纳许多其他类型相同的元素, 因此又被称为容器。 与string相同, vector 同属于…

c++ 一行输出八个数字_R语言笔记(三):数据输入与输出

本文主要介绍数据基本的输入与输出方法&#xff0c;内容包括&#xff1a;1. 数据的输入1.1 scan(), edit(), fix()1.2 调用 R 包自带数据1.3 调用本地数据2. 数据的输出1. 数据的输入1.1 scan(), edit(), fix()手动输入数据主要有以下几种方式&#xff1a;x <- c() # c() 进…

html表单action属性值,HTML中的form表单中的action属性

用户提问在一本书中&#xff0c;在一个处理用户注册的html里&#xff0c;作者把action的值设为"regist.jsp"&#xff0c;如下&#xff1a;function on_submit(){ if (form1.username.value""){ alert("用户名不能为空&#xff0c;请输入用户名&#x…

LeetCode 1985. 找出数组中的第 K 大整数(排序)

文章目录1. 题目2. 解题1. 题目 给你一个字符串数组 nums 和一个整数 k 。 nums 中的每个字符串都表示一个不含前导零的整数。 返回 nums 中表示第 k 大整数的字符串。 注意&#xff1a;重复的数字在统计时会视为不同元素考虑。 例如&#xff0c;如果 nums 是 [“1”,“2”,…

gitosis随记

0、创建git用户 useradd -m git passwd git 1、安装脚本工具&#xff08;gitosis依赖python&#xff09; apt-get install python-setuptools 2、git clone源码 git clone https://github.com/tv42/gitosis.git cd gitosis sudo python setup.py install 3、安装gitosis *id_ds…

firefox应用自动全屏显示_【b】—自动化测试:基础selenium—API

一、浏览器对象# 导入webdriverfrom selenium import webdriver# 创建一个浏览器对象driver webdriver.Firefox()# 设置全屏# driver.maximize_window()# 获取当前浏览器尺寸# size driver.get_window_size()# print(size)# 设置浏览器尺寸driver.set_window_size(400, 400)s…

rn 跳转至html5,ReactNative-从RN端跳转到原生界面

//实现跳转//可以做一次封装&#xff0c;这里只是展示功能AppDelegate *app (AppDelegate *)[[UIApplication sharedApplication] delegate];app.nav.navigationBarHidden NO;[app.nav pushViewController:vc animated:YES];可以这么做的前提就是在app初始化的时候&#xff0…

python 使用期物处理并发

文章目录1. futures.ThreadPoolExecutor2. 期物3. 阻塞型I/O和GIL4. 使用concurrent.futures模块启动进程learning from 《流畅的python》1. futures.ThreadPoolExecutor import os import time import sys import requestsPOP20_CC (CN IN US ID BR PK NG BD RU JP MX PH V…

【linux高级程序设计】(第十三章)Linux Socket网络编程基础 2

BSD Socket网络编程API 创建socket对象 int socket (int __domain, int __type, int __protocol) &#xff1a;成功返回socket文件描述符&#xff0c;失败返回-1. 参数1&#xff1a;socket对象使用的地址簇或协议簇 常用的有PF_LOCAL(本机通信)、PF_INET(IPv4协议簇)、PF_INET6…

数据库中有痣但是有时取不到_农村这种长得像“泥鳅”的鱼,以前没人吃,现在可能有钱都吃不到...

只说真话的农民公众号原创文章&#xff0c;严禁转载在农村中有很多不能叫出名字的花草和野味&#xff0c;它们当中虽然有些长得比较奇怪&#xff0c;名字也比较奇怪&#xff0c;但是却是非常好的疗补食物。有些花草是治疗疾病的良药&#xff0c;有些野味现在也被搬上了酒桌。但…

简述计算机的英语作文,初中计算机的英语作文

初中计算机的英语作文发布时间&#xff1a;2020-04-07在过去的时间里&#xff0c;计算机得到了很大的改进。下面是小编为大家精心整理的关于初中计算机的英语作文&#xff0c;希望能够帮助到你们。The ComputerThe computer is widely used in all phases of society. In indus…

(第三天)函数

定义函数 关键字function用来定义函数。定义函数有两种方法 &#xff08;1&#xff09;函数定义表达式 1 var f function(x) { return x1; } &#xff08;2&#xff09;函数声明语句 1 function funcname([arg1 [, arg2 [...,argn]]]) { 2 3 } 函数声明语句通常出现在JavaScr…

python 使用 asyncio 包处理并发

文章目录1. 线程与协程对比2. 使用 asyncio 和 aiohttp 下载3. 避免阻塞型调用4. 使用 asyncio.as_completed5. 使用Executor对象&#xff0c;防止阻塞事件循环6. 从回调到期物和协程learn from 《流畅的python》 1. 线程与协程对比 threading import threading import iter…

ai预测占比_2019-2021年中国AI芯片市场预测与展望数据

来源&#xff1a;雪球App&#xff0c;作者&#xff1a; IC咖啡&#xff0c;(https://xueqiu.com/1118999957/139121699)预计未来三年AI芯片市场规模仍将保持50%以上的增长速度&#xff0c;到2019年中国AI芯片市场规模将达到124.1亿元。从细分市场结构来看&#xff0c;云端训练芯…

计算机专业英语第2版郭涛翻译,计算机专业英语

计算机专业英语作  者&#xff1a;郭涛 主编出版时间&#xff1a;2007年01月定  价&#xff1a;21.60I S B N &#xff1a;9787560939209所属分类&#xff1a; 大中专教材 > 研究生/本科/专科教材 &nbsp大中专教材 &nbsp语言学习 > 大学英语 &nbsp语…

ODS与数据仓库

数据仓库是目前主要的数据存储体系。数据仓库之增W.H.Inmon认为&#xff0c;数据仓库是指支持管理决策过程的、面向主题的、集成的、随时间而变的、持久的数据的集合。简单地说&#xff0c;一个数据仓库就一个自数据库的商业应用系统&#xff0c;该数据库的数据来自于其它的运作…