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> ...
随机推荐
- ECMA Script 6_必须要知道的基础
ES6 为了保持兼容性,var 命令和 function 命令声明的全局变量,依旧是顶层对象的属性: 另一方面规定,let 命令.const 命令.class 命令声明的全局变量,不属于 window ...
- Wireshark简单使用教程2——附视频
视频链接https://www.bilibili.com/video/av35336089/ 目录 对抓取的流量包进行简单的说明 Wireshark的捕获过滤器和显示过滤器 内容 1.对抓取的流量包进 ...
- 9、vuex快速上手
vue脚手架 npm install -g vue-cli usage: vue init example: vue init webpack myvue 安装vuex: npm i -S vuex ...
- <c:forEach var="role" items="[entity.Role@d54d4d, entity.Role@1c61868, entity.Role@6c58db, entity.Role@13da8a5]"> list 集合数据转换异常
<c:forEach var="role" items="[entity.Role@d54d4d, entity.Role@1c61868, entity.Role ...
- Java作业四（2017-10-8）
import java.util.Scanner; public class Helloworld { public static void main(String[] args) { System. ...
- js 重写alert 兼容iphone使得alert 不带src
<script> window.alert = function(name){ var iframe = document.createElement("IFRAME" ...
- 来自一个电子狂的stm32学习历程
文章尾部有学习时的一些视频资料在学的可以看看那么我们就进入今天的主题我stm32的学习历程 在学习了51单片机之后,早已经对单片机这个东西甚有了解了,所有不管是从内部资源,还是一些常见应用,都可以说的 ...
- js四则运算
这个bug是js固有的,浮点数精度不准,你可以用下面方法来解决,思路是先放大,求和.差.积等运算后再缩小. 如: //加法函数,用来得到精确的加法结果 //说明:javascript的加法结果会有误差 ...
- 移动端适配--flexible.js
引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...
- 2018-2019-2 20165236郭金涛《网络对抗》Exp1 PC平台逆向破解
2018-2019-2 20165236郭金涛<网络对抗>Exp1 PC平台逆向破解 一.实验内容 1.掌握NOP, JNE, JE, JMP, CMP汇编指令的机器码(0.5分) 2.掌 ...