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的更多相关文章

  1. Img图片超过了DIV的最大宽度 解决方案

    在该图片所在的div限定一下里边所有的图片的最大长度,这个长度的值可以是div的长度的略小即可. 例如: <div class="content" style="w ...

  2. css background-size与背景图片填满div

    background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...

  3. css文字居中、图片居中、div居中解决方案

    一.文字居中 若文字只有一行 <!--html代码--> <div class="box"> <p class="text"> ...

  4. 页面布局 ——图片自动按比例显示&&图片随外部div的增大而按比例增大

    图片按比例显示,分为两种情况. 1.空的div内加图片 <div class="emty"><img src="img/my.png"> ...

  5. css文件 如何使背景图片大小适应div的大小

    对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小. background-size有3个属性: auto:当使用该属性的时候,背景图片将保持100% 的 ...

  6. 设置背景图片的方式(优秀)--把图片放在一个div里面

    优点: 此种情况可以保证图片充满整个windows,即使有扩展显示器也可以 <div id="formbackground" style="position:abs ...

  7. 随机图片大小在DIV中垂直居中对齐总结

    老遇到这种样式 现在总结一下 <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type&quo ...

  8. 设置div背景图片填满div

    可以设置div的样式为 background:url('+UPLOAD_PATH+data.url+') no-repeat; background-size: 100%;width:100%;hei ...

  9. 如何让div中的img图片显示在div下面。

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

随机推荐

  1. go reflect

    package main import ( "fmt" "reflect" // 反射包 ) type User struct{ //结构体类型 Id int ...

  2. java Fn键

    需求分析 我想开机禁用触摸板. 方案设计 安装驱动:比较麻烦,驱动也不一定支持开机禁用触摸板. 编程实现,让一段代码开机禁用触摸板 编程实现也分好几种方法: 使用windows API禁用触摸板,这需 ...

  3. ViewPager实现引导页

    1. 要使用ViewPager,必须要创建 PagerAdapter. 这里创建一个 ViewPagerAdapter来继承PagerAdapter public class ViewPagerAda ...

  4. android studio 集成微信登录

    参考: 1.http://blog.csdn.net/suma_sun/article/details/50752528 2.这个更全面一点 : http://www.jb51.net/article ...

  5. C#设计模式(1)——单例模式

    一.概念:确保一个类只有一个实例,并提供一个全局访问点. 二.单例模式具备如下几个特点: 1.只有一个实例. 2.能够自我实例化. 3.提供全局访问点.  三.代码实现 1.简单实现 /// < ...

  6. acm结束了

    最后一场比赛打完了.之前为了记录一些题目,开了这个博客,现在结束了acm,这个博客之后也不再更新了. 大家继续加油!

  7. 走进AngularJs 表单及表单验证

    年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...

  8. HTTP Request Method共计15种

    更多信息可参考http://tools.jb51.net/table/http_request_method

  9. 隐藏NavigationBar的正确方式

    -(void)viewWillAppear:(BOOL)animated { [self.navigationController setNavigationBarHidden:YES animate ...

  10. Linux磁盘分区及配额123

    实验目的: 在现有磁盘的基础上进行分区格式化并为特定用户实施磁盘配额,使其对磁盘这一分区的写入有一定的限制 前期准备: 在我的虚拟机rhel7上有/dev/sda这一分区和fsy这一用户,我将对/de ...