图片根据需要突出div
1、当代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div style="border: solid black;">
<img src="../Website/img/carousel1.jpg">
</div>
</body>
</html>
图片会老实的待在div中。
2、当代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div style="border: solid black;">
<img src="../Website/img/carousel1.jpg" style="margin-bottom: -10%">
</div>
</body>
</html>
图片会有在底部突出
代码中的约束条件没有，当约束条件充分的时候效果会更明显！
图片根据需要突出div的更多相关文章
- Img图片超过了DIV的最大宽度 解决方案
在该图片所在的div限定一下里边所有的图片的最大长度,这个长度的值可以是div的长度的略小即可. 例如: <div class="content" style="w ...
- css background-size与背景图片填满div
background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...
- css文字居中、图片居中、div居中解决方案
一.文字居中 若文字只有一行 <!--html代码--> <div class="box"> <p class="text"> ...
- 页面布局 ——图片自动按比例显示&&图片随外部div的增大而按比例增大
图片按比例显示,分为两种情况. 1.空的div内加图片 <div class="emty"><img src="img/my.png"> ...
- css文件 如何使背景图片大小适应div的大小
对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小. background-size有3个属性: auto:当使用该属性的时候,背景图片将保持100% 的 ...
- 设置背景图片的方式（优秀）--把图片放在一个div里面
优点: 此种情况可以保证图片充满整个windows,即使有扩展显示器也可以 <div id="formbackground" style="position:abs ...
- 随机图片大小在DIV中垂直居中对齐总结
老遇到这种样式 现在总结一下 <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type&quo ...
- 设置div背景图片填满div
可以设置div的样式为 background:url('+UPLOAD_PATH+data.url+') no-repeat; background-size: 100%;width:100%;hei ...
- 如何让div中的img图片显示在div下面。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
随机推荐
- 【数据结构】简单谈一谈二分法和二叉排序树BST查找的比较
二分法查找: 『在有序数组的基础上通过折半方法不断缩小查找范围,直至命中或者查询失败.』 二分法的存储要求:要求顺序存储,以便于根据下标随机访问 二分法的时间效率:O(Log(n)) 二分 ...
- Ajax请求示例
模板 {% for row in host_list %} <tr> <td class="c1">{{ row.id }}</td> < ...
- jQuery 事件方法
事件方法触发器或添加一个函数到被选元素的事件处理程序. 下面的表格列出了所有用于处理事件的 jQuery 方法. 方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将 ...
- 小猪cms模块继承
TextAction 继承 UserAction 继承 BaseAction 继承 Action TextAction 路径 PigCms\Lib\Action\User UserAction 路径 ...
- 遍历hashMap的两种方式
第一种: Map map = new HashMap(); Iterator iter = map.entrySet().iterator(); while (iter.hasNext()) { Ma ...
- 浅谈:javascript的面向对象编程之具体实现
下面的javascript代码都是需要使用jQuery插件来做的.希望大家可以搭建好工作环境 首先我们来做一个练习:在一个删除的超链接中添加一个提示信息,提示是否确认删除. 一般情况下我们都会这么做 ...
- MySQL存储引擎－－MyISAM与InnoDB区别
InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定.基本的差别为:MyISAM类型不支持事务处理等高级处理,而InnoDB类型支持.MyISA ...
- Sed、Awk单行脚本快速参考
文本间隔: # 在每一行后面增加一空行 sed G awk '{printf("%s\n\n",$0)}' # 将原来的所有空行删除并在每一行后面增加一空行. # 这样在输出的文本 ...
- Spring MVC学习笔记——完整的用户登录
1.搭建环境的第一步是导包,把下面这些包都导入工程中 /media/common/工作/Ubuntu软件/SpringMVC_jar包整理/aop/media/common/工作/Ubuntu软件/S ...
- View绘制机制
View 绘制机制 1. View 树的绘图流程 当 Activity 接收到焦点的时候,它会被请求绘制布局,该请求由 Android framework 处理.绘制是从根节点开始,对布局树进行 me ...