资讯专栏INFORMATION COLUMN

img标签直接设置width和height属性,与用style设置width和height的区别

khs1994 / 2286人阅读

摘要:今天做页面轮播图的时候发现了一个很奇怪的问题用属性给标签设置和,图片可以显示完全,但图片比例会发生改变,图片变形。注这里说的前面指的是用设置宽高,后面指的是直接设置标签的和属性。

今天做页面轮播图的时候发现了一个很奇怪的问题:

用style属性给img标签设置width和height,图片可以显示完全 ,但图片比例会发生改变,图片变形。

用img标签里面的width和height属性给图片设置高度和宽度,图片比例不会改变,图片也没变形,但图片会显示不完全。


用style设置img标签width和height的效果:

直接设置img标签的width和height的效果:


网上查了一下,下面这个答案感觉还可以接受(但不知道解释的对不对。。):

注:这里说的前面指的是用style设置宽高,后面指的是直接设置img标签的width和height属性。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54928.html

相关文章

  • 前端基础-- CSS

    摘要:语法每个样式右两部分组成选择器和声明。格式如下外部样式外部样式就是将写在一个单独的文件中,然后在页面进行引入即可。CSS知识 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。Css之车更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色;允许在任何元素外围设置边框;允许改...

    番茄西红柿 评论0 收藏0
  • 前端基础-CSS属性相关设置

    摘要:值描述左边对齐默认值右对齐居中对齐两端对齐文本装饰为重点值描述默认。继承父元素的属性的值。具体的像素一定要加单位例如,等等第一个值是水平位置,第二个值是垂直位置。单位是像素或任何其他的单位。一 字体属性二 文本属性三 背景属性四 盒子模型五 盒子模型各部分详解一、 字体属性1、font-weight:文字粗细(表格中*为重点)取值描述normal默认值,标准粗细bord粗体 *border...

    番茄西红柿 评论0 收藏0
  • html5与css3阶段复习题

    摘要:将超出对象尺寸的内容进行裁剪,不会出现滚动条。过渡效果使用动画使用需要触发一个事件才会随着时间改变其属性在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素属性,达到一种动画的效果动画不需要事件触发,过渡需要。 1.请列出核心选择器、层次选择器有哪些 (5) 核心选择器:id选择器、class选择器、标签选择器、逗号选择器、普遍选择器 层次选择器:子代选择器、后代选择器、下...

    techstay 评论0 收藏0
  • CSS知识点及技巧整理

    摘要:当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。详见浮动与清除浮动浮动相关知识属性的取值元素向左浮动。是相对长度单位,相对于当前对象内文本的字体尺寸。 这些个知识点是我个人认为的,下面我们就来看看这些个知识点。 1.怎么让一个不定宽高的 DIV,垂直水平居中? 使用Flex 只需要在父盒子设置:display: flex; justify-content: cent...

    masturbator 评论0 收藏0
  • CSS知识点及技巧整理

    摘要:当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。详见浮动与清除浮动浮动相关知识属性的取值元素向左浮动。是相对长度单位,相对于当前对象内文本的字体尺寸。 这些个知识点是我个人认为的,下面我们就来看看这些个知识点。 1.怎么让一个不定宽高的 DIV,垂直水平居中? 使用Flex 只需要在父盒子设置:display: flex; justify-content: cent...

    EasonTyler 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<