图片根据需要突出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>& ...
随机推荐
- 创建ejs模板的express工程
npm install -g express npm install -g express-generator express -e projectName cd projectName npm in ...
- Hihocoder 太阁最新面经算法竞赛18
Hihocoder 太阁最新面经算法竞赛18 source: https://hihocoder.com/contest/hihointerview27/problems 题目1 : Big Plus ...
- jQuery实现动态分割
由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包 可用于页面布局. //============================ind ...
- MVC项目中，如何访问Views目录下的静态文件！
<!--注意,是system.webServer节点,而非system.web--><system.webServer> <handlers> <add na ...
- vue-resource初体验
这个插件是用于http请求的,类似于jquery的ajax函数,支持多种http方法和jsonp. 下面是resource支持的http方法. get: {method: 'GET'},save: { ...
- Mysql 中文乱码（Navicat for MySQL）
在使用Navicat for MySQL查看插入数据库的数据时,发现中文显示为乱码.搞了好久,理清思路如下: 确定mysql本身编码设置为utf8(也可以为gbk gb2312等) 用Navicat ...
- C#委托与事件
一.在控制台下使用委托和事件 我们都知道,C#中有"接口"这个概念,所谓的"接口"就是定义一套标准,然后由实现类来具体实现其中的方法,所以说"接口,是 ...
- 后进先出 stack、 先进先出Queue
using System; using System.Collections; using System.Collections.Generic; using System.ComponentMode ...
- Java数据结构——平衡二叉树的平衡因子（转自牛客网）
若向平衡二叉树中插入一个新结点后破坏了平衡二叉树的平衡性.首先要找出插入新结点后失去平衡的最小子树根结点的指针.然后再调整这个子树中有关结点之间的链接关系,使之成为新的平衡子树.当失去平衡的最小子树被 ...
- ubuntu下gedit闪退，遇到问题：ERROR:../../gi/pygi-argument.c:1583:_pygi_argument_to_object: code should not be reached 已放弃 (核心已转储)
解决方法:编辑->首选项关闭->插件->取消"多文件编辑"