精华内容
下载资源
问答
  • 在div中怎么放图片
    千次阅读
    2018-12-18 09:27:45

    直接上代码

    <div id="dataImage" style="no-repeat;z-index:-1;">        //这里width和height根据需求随便设置
    	<img src="/super/images/pgjg.jpg" style="width:100%;height:100%" />     //这里width和height必须为100%
    </div>
    
    更多相关内容
  • -HTML&CSS- ——在DIV中放图片

    千次阅读 2018-04-19 01:02:00
    上传的图片不好观察,可以右键选择“新的窗口打开图片”。 说明:用一个大DIV包住这么些内容,给每个图片和链接也分配一个小DIV,其中,通过左移或者右移(即设置 background-position )多次测试出几个小图案...

    素材图片:

    要求结果为:

    自己的代码为:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>DivTest</title>
    	<link rel="stylesheet" type="text/css" href="css/divTest.css">
    </head>
    <body>
    	<div class="cen">
    		<div class="tp d1"></div>
    		<div class="tp"><a href="#">购物车</a></div>
    		<div class="tp d2"></div>
    		<div class="tp"><a href="#">帮助中心</a></div>
    		<div class="tp d3"></div>
    		<div class="tp"><a href="#">加入收藏</a></div>
    		<div class="tp d4"></div>
    		<div class="tp"><a href="#">设为首页</a></div>
    		<button>登录</button>
    		<button>注册</button>
    	</div>
    </body>
    </html>
    /*
    * @Author: lenovo
    * @Date:   2018-04-14 11:12:55
    * @Last Modified by:   lenovo
    * @Last Modified time: 2018-04-19 00:39:09
    */
    .cen{
    	float:right;
    	margin-top:20px;
    	margin-right:100px;
    }
    .tp{
    	float:left;
    }
    .d1{
    	background: url("F:/HtmlTest/Learn414/images/icon.gif");
    	background-repeat: no-repeat;
    	background-position: -2px -2px;
    	//background-color:green;
    	//border:1px solid red;
    	height:23px;
    	width:23px;
    }
    .d2{
    	background-image: url("F:/HtmlTest/Learn414/images/icon.gif");
    	background-repeat: no-repeat;
    	background-position: -43px -2px;
    	//background-color:green;
    	//border:1px solid red;
    	height:23px;
    	width:23px;
    }
    .d3{
    	background-image: url("F:/HtmlTest/Learn414/images/icon.gif");
    	background-repeat: no-repeat;
    	background-position: -84px -2px;
    	//background-color:green;
    	//border:1px solid red;
    	height:23px;
    	width:23px;
    }
    .d4{
    	background-image: url("F:/HtmlTest/Learn414/images/icon.gif");
    	background-repeat: no-repeat;
    	background-position: -125px -2px;
    	//background-color:green;
    	//border:1px solid red;
    	height:23px;
    	width:23px;
    }
    

    完成情况为:

    上传的图片不好观察,可以右键选择“在新的窗口打开图片”。

    说明:用一个大DIV包住这么些内容,给每个图片和链接也分配一个小DIV,其中,通过左移或者右移(即设置background-position)多次测试出几个小图案之间的横向X轴像素差为41px,再稍加调整就可以了!

     

    首先第一个区别:语义。p标签的语言是段落(paragraph),而div是没有语义的,只是一块用来方便设置样式排版的,<div>和<p>都是块状元素。

    第二个区别:就是p标签有默认样式,段落前后都会有一行空白区域,当然你用div自己设置也是可以的。div的添加如果没有什么css修改的话对样式没有影响。

    转载于:https://my.oschina.net/u/3805464/blog/1797572

    展开全文
  • dreamweaver 怎么网页使用div展示图片效果?想给网站插入一些图片,怎么使用div展示图片呢?下面我们就来看看详细的设置方法,需要的朋友可以参考下
  • css图片自适应div大小怎么做

    千次阅读 2021-06-08 15:26:43
    css图片自适应div大小怎么做内容导读:css图片自适应div大小的控制,为了让图片能够更好的展示,建议使用max-width这个属性。不管是pc端还是移动端,或者是自适应网站,使用max-width都能够让图片的展示更加规范。...

    css图片自适应div大小怎么做

    内容导读:css图片自适应div大小的控制,为了让图片能够更好的展示,建议使用max-width这个属性。不管是pc端还是移动端,或者是自适应网站,使用max-width都能够让图片的展示更加规范。当然,如果div有固定的尺寸,那么就填下固定的尺寸,如果没有则设置100%即可。

    问题:css图片自适应div大小怎么做?

    回答:图片自适应div大小主要是控制图片的宽度,可以通过设置css里面的width属性来解决问题。img{ width:100%; height:auto}

    注意:这里是指图片自动放大或者是缩小,以填充完div的宽度,如果图片太小,那么放大后就会变得模糊。所以,尽量设置max-width比较好,比如:img{ max-width:100%; height:auto}

    这样就是表示图片的最大宽度不得超过div宽度。

    如果div有明确的尺寸,也可以设图片的最大尺寸,如:img { border: none; max-width:850px;}

    css图片自适应div大小的控制,为了让图片能够更好的展示,建议使用max-width这个属性。不管是pc端还是移动端,或者是自适应网站,使用max-width都能够让图片的展示更加规范。当然,如果div有固定的尺寸,那么就填下固定的尺寸,如果没有则设置100%即可。

    本文标签:css

    这篇关于“css图片自适应div大小怎么做”的文章已帮助 1274 人,希望也能帮到你!

    本站内容大部分由沐风博客原创,少部分内容来源于网络,如有侵权请与我们联系,我们会及时删除!

    责任编辑:沐风 | 发布时间:2020年08月25日15点08分39秒 |

    本文永久地址为 http://www.tangmengyun.com/seo/2244.html

    展开全文
  • div 如何防止图片太大被撑开

    千次阅读 2021-06-11 11:51:43
    比如你的DIV宽度为550px(像素),那你上传的图片入网页的图片宽度就要小于500px,也就是你图片需要图片软件剪切、等比例缩小方法处理后再上传、入网页解决撑破撑开DIV问题。常见很多大型图片站点、新闻站点都...

    方法一:

    原始处理方法是将要展示的图片进行处理。比如你的DIV宽度为550px(像素),那你上传的图片或放入网页的图片宽度就要小于500px,也就是你图片需要图片软件剪切、等比例缩小方法处理后再上传、放入网页中解决撑破撑开DIV问题。

    常见很多大型图片站点、新闻站点都是将照片图片进行处理适应网页宽度情况下,进行图片编辑处理的。

    方法二:

    如果不处理照片方法适应DIV有限宽度,那可以对DIV设置隐藏超出内容方法。只需要对DIV设置宽度后加入CSS样式“overflow:hidden”即可解决隐藏图片比DIV过宽部分解决撑破DIV问题。

    方法三:

    对图片img标签中只加入宽度即可解决。这样可以等比例缩小图片,不会影响图片画面质量。

    比如你的网页DIV宽度为500px,那你上传图片后对img标签设置width等于500以下即可。

    %E5%9B%BE%E7%89%87%E8%B7%AF%E5%BE%84即可解决图片过宽导致DIV SPAN撑破,这样好处可以等比例放大缩小图片。

    方法四:

    这种方法使用CSS直接对div内的img进行宽度设置,这样不好是如果图片过小会影响网页浏览图片时候效果。

    Div结构:

    %E5%9B%BE%E7%89%87%E8%B7%AF%E5%BE%84

    对应CSS代码:.divcss5 img{width:宽度值+单位}

    方法五:

    使用max-width(最大宽度),比如你DIV宽度为500px,那你对应DIV样式再加入最大宽度CSS样式“max-width="500px"”即可解决,但是在IE6浏览器不兼容此属性,谨慎使用。

    总结:

    1、最大宽度(max-width)+overflow:hidden。我们这样设置可以让IE6版本以上浏览器支持最大宽度样式,也让IE6下隐藏图片超出宽度而撑开DIV得到解决,此方法比较方便和实用。(IE6是做DIV+CSS最头痛的事了)

    2、只使用overflow:hidden属性,如方法二

    3、图片使用上传时候软件处理下,以适应DIV布局宽度,如方法一

    展开全文
  • div中图片不变形的解决方法

    千次阅读 2019-12-11 11:38:30
    在DIV CSS布局对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定死图片大小(宽度 高度),这个时候如果图片相对于这个位置不是等比例大小,那么这张图片...
  • HTML <div> 标签插入图片

    千次阅读 2021-06-12 01:05:32
    美工想做一个DIV + CSS 布局的网页 页面布局如图DIV1、DIV2、DIV3为背景层用来放置背景图片需要无缝拼接DIV1a、DIV1b、DIV1c属于DIV1DIV2a、DIV2b属于DIV2DIV3a、DIV3b、DIV3c属于DIV3且DIV1a、DIV1bDIV2a、DIV2bDIV...
  • div style="border:1px solid yellow;color:yellow;text-align:center"> <img src="@/common/images/logo.png" style="width:44px;" alt=""> <span style="position:absolute;margin-top:10px;margin-...
  • 背景:要项目首页的加入一个背景图片,然后这次用的是DIV在DIV中加入背景图片,然后body加入 <div class="ho" style="height:100%;width: 100%;"> </div> .ho { background:url(../ima...
  • 网页设计图片是不可缺少的素材,但是在div标签里面入img图片的话,有时候会在图片的下方出现一行空间的区域,如果单纯的图片不醒目或是图片所在的位置不重要的话,我们可以不去理会,但是做为一个完美型的页...
  • 用js在div里面添加图片和文字元素

    千次阅读 2021-12-27 09:46:44
    <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div { width: 520px; height: 300px; } </style>...
  • 1 . css代码.imgBox{background-image: url... //图片路径 可写标签的style当中background-repeat: no-repeat;width: 120px;height: 120px;overflow: hidden;background-position: left top;border: 1px solid #00...
  • 想实现一个类似qq头像的效果,将方形图片放到圆形div中,设置overflow:hidden,超过的地方隐藏,代码如下。但是出现了问题,只显示了图片的一部分。(有时候会在图片下方出现空白) 1.html代码 <div class=...
  • 图片在div里居中(三种方法)

    千次阅读 2021-03-01 19:19:08
    当我们将一张 img 放在 一个 div 里的时候,具有超高审美的我们,硬是要将 img 居中于 div。所以,产什么以下解决方法。 解决方法 布局文件代码 <div class="content"> <img src="img_p1_title.png"&...
  • div里面添加图片

    万次阅读 2018-11-05 15:47:01
    div style="height:120px;;background-size:cover;background-repeat:no-repeat;background-position:center;background-image:url({{ApiUrl}}{{visitDetail.PICTURE}})"&gt;&lt;/div&gt;
  • 让一个图片在div中居中(四种方法)

    万次阅读 多人点赞 2017-12-10 11:21:18
    让一个图片在div中居中(四种方法)
  • css将div定位到图片上的固定位置

    千次阅读 2021-06-12 01:16:12
    如图我有个总的大div,宽度和高度都是不定的,里面的手机线框是背景图,用的background-size:contain定位的,黑框是我想要操作的div,想让他能覆盖手机模型的屏幕,而且放大缩小都会刚好限制手机屏幕内,该怎么...
  • 网页我们多使用css+div进行布局,我们通常会将图片放在div中,那么该如何让图片在DIV盒子里水平居中。下面我们来看一下css设置图片在div中居中的方法。css3使div图片居中的方法:1、利用display:table-cell,...
  • 于是任务进行的过程,我总结了一套万能的图片、文字垂直居中方法,记录这里(脑子不好,为了便于以后使用时理解代码,写demo时对所有代码进行了注释) 在线演示:DIV中图片文字垂直居中Demo 代码说明:...
  • 实现div里的img图片水平垂直居中

    千次阅读 2020-12-20 14:36:19
    1.已知img的宽高情况下,设置img在div中的水平垂直居中:方法一: 将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。html代码: css样式如下:* { margin: 0; ...
  • <style type="text/css">... /* 解决办法 插入图片得盒子里 或图片标签内设置选择器并设置css样式 float属性 float是浮动属性 这样能完美解决盒子跑出的问题*/ div.box2{ float:left; } .
  • html 图片在一个div中放大缩小效果

    万次阅读 2018-09-05 22:22:35
    图片放大,缩小也是前端经常遇到得问题,以下就根据这个需求,做如下示范: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;图片放大&lt;/title&gt; &...
  • div class="daohang"> <div class="ig" id="qx"> <img id="" class="app-map-btn app-tap" src="res/im/tq.png"/> <span>气象</span> </div> <div clas...
  • <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{  width: 200px;  height: 200px;  border:2p...
  • 鼠标悬停图片上显示文字 在线演示 www.divcss5.comimg {border: 0}/* css 注释说明:设置图片边框为0 */body {behavior: url("csshover.htc");text-align: center;}/* css注释说明:兼容ie6 支持标签使用hover */....
  • div id="editer" contenteditable="true" style="border: 1px solid #ccc; width: 400px; height: 200px"&gt; 123456123456 &lt;/div&gt; &lt;button onclick=&...
  • div设置背景(vue设置div的背景图片)

    千次阅读 2020-12-22 18:04:53
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,p,th,td,table,textarea,select{margin:0;padding:0;}ol,ul{list-style:none;}img,aimg{border:0;}.alC{text-align:center;}body{font:12pxArial;color:#6...
  • nav 四列的第一列 四列的第二列 四列的第三列 四列的第四列 nav 这是五列的第一列 这是五列的第二列 这是五列的第三列 这是五列的第四列 这是五列的第五列 ...
  • 图片如何在div中居中

    千次阅读 2018-07-01 20:27:20
    即可达到垂直居中(切记,是给图片加,不是div,很多人容易搞错)还有一个方法,就是用table布局,td默认是水平方向居左的,但是垂直方向是居中的,所以你套一个table后再插入图片的话,也能很好的达到垂直居中...
  • 解决file文件document.querySelector('input[type=“file”]).value=“C:\fakepath” ...div class="headPortrait"> <div>请选择头像</div> <input type="file" hidden name="image"> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 101,763
精华内容 40,705
关键字:

在div中怎么放图片