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> ...
随机推荐
- ARM_DMA学习
AMBA: advanced(高级) microcontroller bus architecture; 利用多层总线系统减少DMA传输和CPU中断的延迟: DMA流或DMA通道,流优先级,Adres ...
- PL-SVO公式推导及代码解析:位姿优化
通过跳过极线约束单独优化图像中每个特征的位置后,必须通过最小化3D特征与图像中相应的2D特征位置之间的重投影误差来进一步细化(3)中获得的相机姿态( 见图5).为此,我们考虑在世界坐标系中3D特征和相 ...
- django分页
page_count = 1 current_page = int(request.GET.get('p',1)) course1 = Course.objects.all().order_by('- ...
- python中list添加元素的方法append()、extend()和insert()
append()函数:将新元素追加到列表末尾 In [1]: a = [1, 2, 3, 4, 5] In [2]: a.append(6) In [3]: a Out[3]: [1, 2, 3, 4 ...
- 新手上路、安装JDK教程
按照以下的图片步骤,登录http://www.oracle.com 下载 JDK (J2SE) JDK 1.0, 1.1, 1.2, 1.3, 1.4 1.5.(JDK5.0) → 支持注解. ...
- VUE-004-禁止修改页面显示项，设置el-input，textarea只读方法
在实际业务需求中,有些内容当初次创建后,即不可再次进行修改变更,因而需要显示的文本内容不允许变更.此时,可通过页面限制防止用户修改. 方法:添加 readonly="true" 或 ...
- Zookeeper节点增删改查与集群搭建（笔记）
1.上传文件目录说明 上传的文件一般放在 /home/下 安装文件一般在 /usr/local/下 2. 安装zookeeper 2.1将zookeeper-3.4.11.tar.gz拷贝到/home ...
- python split 的应用
# 1. 有字符串 "k:1|k1:2|k2:3|k3:4" 处理成字典 {"k":1, "k1":2,...}a1 = "k:1 ...
- h5页面适配小结
大概是去年的7月想写这个内容去加深自己的理解.现在终于回来补上这篇入门小结了. 1.问题描述 适配的目标:在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)”或者“保持统一效果的等比缩放( ...
- FB面经Prepare: Merge K sorted Array
Merge K sorted Array 跟Merge K sorted lists不同在于,从PQ里poll出来以后不知道下一个需要被加入PQ的是哪一个 所以需要写一个wrapper class p ...