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> ...
随机推荐
- PAT甲级1034 Head of a Gang【bfs】
题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805456881434624 题意: 给定n条记录(注意不是n个人的 ...
- Python全栈-magedu-2018-笔记1
第一章 - Python 环境搭建 操作系统准备 准备Linux最小系统即可. 如果在虚拟机中克隆,MAC地址会变. 这里使用CentOS 6.5+ Pyenv 安装 安装git yum instal ...
- day26：静态方法，类方法和反射
1,包内部不要去尝试应用使用相对导入,一定不会成功的,他不支持这个机制,包内导入时一定要用绝对导入 2,复习接口类,抽象类,Python中没有接口类,有抽象类,抽象类是通过abc模块中的metacla ...
- kubernetes in action - Overview
传统的应用都是“monoliths”,意思就是大应用,即所有逻辑和模块都耦合在一起的 这样明显很挺多问题的,比如只能scale up,升级必须整体升级,扩容 所以我们就想把大应用,broken dow ...
- AKA “Project” Milestone
Homework 6 (60 points)Due Thursday, April 25th at 11:59pm (via blackboard) AKA “Project” Milestone # ...
- Django ORM存储datetime 时间误差8小时问题
今天使用django ORM 将获取到的时间入库,并未出现问题,但是后来发现时间晚了8小时,经查询Django官方文档发现获取本地时间和UTC时间有差别. 首先科普下:UTC是协调世界时 UTC相当于 ...
- VUE-009-页面打开时初始化配置项内容
网页开发过程中,尤其是在表单开发过程中,不可避免的会有各种各样的基础数据需要展示,供用户使用.例如,大家在办理信用卡时,经常需要填写各种表单数据,其中:性别(男.女).学历(高中及以下.大专.本科.研 ...
- Rabbit MQ 消息确认和持久化机制
一:确认种类 RabbitMQ的消息确认有两种.一种是消息发送确认,用来确认生产者将消息发送给交换器,交换器传递给队列的过程中消息是否成功投递.发送确认分为两步,一是确认是否到达交换器,二是确认是否到 ...
- 兼容在安装linux系统过程中不支持非原装的光模块的命令
1 .通过ifconfig -a发现有网卡找不到,并且配置没有问题,那么很可能是光模块有问题2 .dmesg | grep 82599EB ,通过这个命令过滤发现有如下信息: [ 7142.12197 ...
- 添加新网络模型后运行报错：未定义的参数：ps_roipooling param
现象描述:在新增了具有自定义的data层或者loss层的网路之后,工程运行会报错: 疑惑:并没有这样的参数新增,并且前向的deploy文件已经将自定义的loss以及data等都去掉了: 可能的原因:虽 ...