html中怎么把图片按比例缩放在<span>里面

如题所述

首先,你使用span元素并不是很合理,因为span元素是行元素,不能够设置宽高

如果一定要使用span元素,需要设置宽高,之后对图片进行处理

将span元素调整为块元素(设置display: block),赋予固定的宽度或百分比

之后为图片设置宽度和高度,宽设置为100%,即可让图片等比例进行缩放,宽度等于span的宽度,高度会等比例变化

.box {
    display: block;
    width: 200px;
}
.box img {
    width: 100%;
}
温馨提示:内容为网友见解,仅供参考
第1个回答  2018-07-30
span本身不是块儿状区域,如果你非要强加上的话,给span设置:display:block;这样就可以了
还有,你想让span内的img图片上移一下的话,你把span设置为块儿区域了以后,然后在你的margin-top:0px;修改成 -10px;然后你再看看效果就可以了。
margin是调整外边距的距离
padding 是调整内边距的距离本回答被网友采纳

html中怎么把图片按比例缩放在<span>里面
将span元素调整为块元素(设置display: block),赋予固定的宽度或百分比 之后为图片设置宽度和高度,宽设置为100%,即可让图片等比例进行缩放,宽度等于span的宽度,高度会等比例变化 .box { display: block; width: 200px;}.box img { width: 100%;} ...

图片拉伸自动填充单元格的HTML代码是什么?
你可以再表格里加一个DIV层 然后把DIV得背景设置成你所想要的背景图片 然后设定DIV所在层的坐标代码如下<div style="z-index:-100; position:absolute"><\/div> <div style="z-index:100" ><img src="新建文件夹 (2)\/iamage\/asdsad.jpg" \/><span style="z-index:-100; position:absol...

html怎么把图片弄到输入框里面?
方法为:可以使用before或者after伪元素来实现。具体的操作步骤如下:1、首先,创建一个新的html文件并编写一个input标签,如下图所示。2、其次,将after伪元素添加到input标签前面的span标签,然后将伪元素的背景设置为要添加的图片,如下图所示。3、最后,将相对位置添加到父元素,为了使伪元素能相对父...

在html里图片和文字同时在同一个div里怎么让图片浮动到图片的上面
1、在同一个div里,先书写一段代码,如下图所示,在这个代码中给dive设置宽度和高度,这时为了让文字有一个具体的范围。2、找到background,如下图示,在background的后面添加上图片作为这个的背景图案。3、之后在background后面加上url(),为了连接图片,在url里面写的就是背景图片的路径。4、可以根据...

html如何设置图片居中html如何设置图片居中对齐
1、首先我们需要打开电脑,找到DW软件的快捷键,双击打开之后,新建一个html页面。2、然后我们会进入到DW的HTML页面的编辑页面,我们需要将新建的html页面进行一个保存。3、将网页保存好之后,我们需要重新回到DW的编辑页面。4、然后我们需要在body部分新建一个p标签,并在其中插入一张img图片。并给p添加...

HTML 中img图像如何紧靠文本框呀
首先有2种:1种是在标签里面引入<img>标签来导入图片;2.在标签的背景中通过,background-image来导入图片;对于第一种:首先你得保证<img>外层的标签不能有内边距(padding);除外你得保证你的<img>不能有外边距;第二种:通过背景引入的话,你可以用background-position:left(这儿是默认左边靠紧)...

html里怎么实现图片跟文字的混合排版?
1、可以用一个最大的div层 包裹住,左边一个div 左浮动,右边一个div右浮动,左边的就是一个logo图,主要处理在右边。2、右边的div定义好之后,在细分为上中下,三个大div,最上面的div 可以左右浮动,左边一个span标签放定位,右边可以用 ul li标签 来进行分配。3、中间的div同理。左右div...

html 中span标签里面都能放那些标签??
默认的span标签是一个行内标签,页面构成时,尽量把它作为最后一个标签。当然不绝对,你可以在内套用同是行内标签的元素:<i>、<span>、<em>。。。等等等。如果套用块状标签,那么很多情况浏览器解析会把它放到span的外面,w3c内明确标识了,行内元素不可以套用块状元素。如果不按照HTML规则书写代码时...

为什么在html页面设置<span>的高度和宽度没有效果呢
1 span{display:inlie-block;} 实例演示:下面给出了两种样式,class1设置span 的宽高,class2改变span为行内块体元素,然后给其中一个span添加class1样式,另一个同时添加class1和class2样式,观察效果 创建Html元素 1 2 <span class="class1">示例文字<\/span> <span class="class1 class2">示例文字<\/span> ...

在html里图片和文字同时在同一个div里怎么让图片浮动到图片的上面
\/*图片部分的设置*\/ #img1{ \/*position: static;默认定位,可以省略*\/ width: 100%; height: 100%; } \/*文字的设置*\/ #span1{ position: absolute;\/*绝对定位*\/ width: 100%; bottom: 0px;\/*离底下0像素*\/ left: 0px;\/*离左边0像素*\/ text-align: center; font-size: 18px; color: white...

相似回答