CSS——img自适应div大小
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>哈哈</title>
<style>
.div0 {
width: 300px;
height: 100px;
background: yellow;
}
.div1 {
width: 300px;
height: 100px;
background: red;
}
.bg1{
/* 这种不会失真 */
max-height: 100%;
max-width: 100%;
}
.div2 {
width: 300px;
height: 100px;
background: blue;
}
.bg2{
/* 这种不会失真 */
min-height: 80%;
min-width: 80%;
}
.div3 {
width: 300px;
height: 100px;
background: green;
}
.bg3{
/* 这种情况可能会失真 */
height: 50%;
width: 50%;
}
</style>
</head>
<body>
<div class="div0">
<img src="img/qt_img/SA_4.png"/>
</div>
<div class="div1">
<img class="bg1" src="img/qt_img/SA_4.png"/>
</div>
<div class="div2">
<img class="bg2" src="img/qt_img/SA_4.png"/>
</div>
<div class="div3">
<img class="bg3" src="img/qt_img/SA_4.png"/>
</div> </body>
</html>
运行结果：
注：
max-height(用来设置指定元素的最大高度)：这个属性会阻止 height 属性的设置值变得比 max-height 更大。
min-height(用来设置指定元素的最小高度)：这个属性会阻止 height 属性的设置值变得比 min-height 更小。 当 height 属性设置的高度小于该属性的值时，则 height 属性会失效。
max-height 重载（覆盖掉） height, 但是 min-height 又会重载（覆盖掉） max-height。即min-height 会将 max-height和 height的值都覆盖掉。
CSS——img自适应div大小的更多相关文章
- CSS实现自适应不同大小屏幕的背景大图的两种方法（转自简书）
CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...
- 设置图片自适应DIV大小
可以利用CSS样式表中表示后代的复合选择器进行设置.例: <head> <style type="text/css"> #right img /*设定box ...
- CSS实现自适应不同大小屏幕的背景大图
在网上搜了好多demo:可总有这样那样的一些小瑕疵,试过几次后发现这样效果是最好的 html: <div class='bg'> <img src="image/bk02. ...
- 使图片自适应div大小
<img src=“” onload="javascript:if(this.height>MaxHeight)this.height=MaxHeight;if(this.wid ...
- Div 自适应屏幕大小
http://blog.csdn.net/wodetiankong516/article/details/7827256 Background 有时, 我们需要将div或者其他的Elemen ...
- css自适应浏览器大小
css自适应浏览器大小 1.屏幕 > 900px :显示3列 2.450px < 屏幕 < 900px :显示2列 3.屏幕 < 450px :显示1列 <!DOCTYP ...
- div+css布局自适应小结
一.两栏布局(左定宽,右自动)1. float + margin即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度.举例: &l ...
- div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形
摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...
- 演示：纯CSS实现自适应布局表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- JS节流和防抖
事件的触发权很多时候都属于用户,有些情况下会产生问题: 向后台发送数据,用户频繁触发,对服务器造成压力 一些浏览器事件:window.onresize.window.mousemove等,触发的频率非 ...
- Python Learning - Three
1. Set Set is a collection which is unordered and unindexed. No duplicate members In Python sets ar ...
- NetBeans GUI tests on Jenkins + Windows (转)
from http://forgetfulprogrammer.wordpress.com/tag/interact-with-desktop/ Running NetBeans applicatio ...
- 深入理解iostat
前言 iostat算是比较重要的查看块设备运行状态的工具,相信大多数使用Linux的同学都用过这个工具,或者听说过这个工具.但是对于这个工具,引起的误解也是最多的,大多数人对这个工具处于朦朦胧胧的状态 ...
- nginx的proxy_redirect
proxy_redirect 语法:proxy_redirect [ default|off|redirect replacement ]; 默认:proxy_redirect default; 配置 ...
- [Day25]IO(Properties、序列化流、打印流、Commons-IO)
1.Properties类-持久的属性集,可保存在流中或从流中加载,属性列表中每个键及其对应值都是一个字符串 1.1 特点 (1)Hashtable的子类,map集合中的方法都可以用 (2)该集合没有 ...
- oracle_dataGuard_11G
[李红]--切记_从库只安装实例_不需要 dbca 创建数据库 但是 netca 创建监听看个人喜欢,我反正是创建了.[DataGuard_主数据库的参数配置]1.启用 force logging 功 ...
- MySQL 的安装
MySQL的全部安装步骤. 1::本案例要求熟悉MySQL官方安装包的使用,快速构建一台数据库服务器: 安装MySQL-server.MySQl-client软件包 修改数据库用户root的密码 确认 ...
- python 数据分析算法（决策树）
决策树基于时间的各个判断条件,由各个节点组成,类似一颗树从树的顶端,然后分支,再分支,每个节点由响的因素组成 决策树有两个阶段,构造和剪枝 构造: 构造的过程就是选择什么属性作为节点构造,通常有三种节 ...
- match 和 lastIndex 字符串检测差异
match .replace .search 这写不能识别特殊字符 indexOf .indexof 能识别特殊字符 str.lastIndexOf('a') > -1 // 通过lastInd ...