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> ...
随机推荐
- __x__(21)0907第四天__ css 盒模型 (框模型)
CSS 处理元素,把每个元素都包含在一个盒子里. 对网页的布局,其实就是对盒子的摆放及设置. 边框border,会使盒子变大: .box{ border: 10px 20px 30px 40px r ...
- Java课程课后作业190315之最大连续子数组（二维数组版）
,, 在本周的课堂上,老师再一次提高了要求,将一维数组升级成为了二维数组,然后求出块状的连续子数组. 一开始还想着借鉴之前球一维数组的O(n)的算法,后来还是没有找到头绪,舍友讲了自己的办法,但是没有 ...
- React组件传值
React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数据流,数据主要从父 ...
- 2、vuex页面刷新数据不保留，解决方法（转）
今天这个问题又跟页面的刷新有一定的关系,虽然说跟页面刷新的关系不大,但确实页面刷新引起的这一个问题. 场景: VueX里存储了 this.$store.state.PV这样一个变量,这个变量是在app ...
- 解析CommandMessage
Json 解析: void CommandMessage::ParseCmdBody() { try { Json::Reader reader; Json::Value root; if (!rea ...
- tomcat体系结构
总体架构解析 Server: 一个StandardServer类实例就表示一个Server容器,TOMCAT启动的时候首先会启动一个Server,一个Server包括多个Service Service ...
- 简述移动端开发前端和app间的关系
<p>前端页面嵌套进app内部,一般有时候会进行一些交互,类似于前端页面请求后台接口一样,通常会起一个前端开发人员和app开发人员会相互协定一个协议;双方就协议而言去进行请求接口和返回数据 ...
- javascript 表达式
// for(表达式1;表达式2;表达式3){// 循环体语句;// }// 先执行表达式1,在执行2表达式,// 如果2表达式结果为false,退出循环 ...
- [Freemarker]自定义时间戳函数
使用freemarker的web项目经常需要用在Url后面加上时间戳来保证资源不被缓存,我们可以自定义方法实现时间戳. 先看freemarker配置信息: <bean id="free ...
- RN如何基于js代码手动打一个main.jsbundle
react-native bundle --entry-file index.js --bundle-output ./ios/bundle/main.jsbundle --platform ios ...