1、在HTML标签内更改宽度和高度,width等于宽度,height等于高度,直接插入在图片地址后面。
2、使用CSS样式控制width和height属性。
日常项目中,后端传图不规则,比例大小不一。前端又要去做适应,是一个让人非常头大的问题。
总结了一个不规则图片不变形的解决方案:
注:先写一个长 300px 宽 200px 带边框的 div ,图片接近方形,实现图片正常显示不变形。
通过背景图的 background-position 属性,可以使图片居中显示。国外一些网站有看到类似的案例,简单好 *** 作。
这样可以显示完整的图片,不变形:
若要图片填满容器,可以将 background-size 属性改为 100% auto :
如下图:
同样 background-size 的 contain (完整显示)和 cover (填充)属性也能起到相同的效果。
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框,不支持IE。
可用属性:
fill 不保持纵横比缩放图片,使图片完全适应
contain 保持纵横比缩放图片,使图片的长边能完全显示出来
cover 保持纵横比缩放图片,只保证图片的短边能完全显示出来
none 保持图片宽高不变
scale-down 当图片实际宽高小于所设置的图片宽高时,显示效果与none一致;否则,显示效果与contain一致
inherit 继承
initial 默认值
unset 继承父元素,若父元素没有属性则显示默认值
CSS:
该方法也可以实现以上两种方法的效果。
以容器宽 200px 高 300px ,图片为方形为例:
设置 width: 100% 为图片完整显示,多出部分留白。
设置 height: 100% 为图片全部填充,这时候需要给图片的容器添加 overflow: hidden 属性,防止图片超出。
图片等比例缩放,多余部分,还有就是要考虑IE兼容问题,可以在手机端项目中使用。
js 方法应该比较通用,可以兼容多版本浏览器。
也可以兼容多版本浏览器,需要 jQuery 加持。
图片等比例缩放,多余部分空白填补:
img固定宽度和高度,不规则图片变形问题的解决方法-HTML笔记-w3h5-Web前端开发资源网
img标签内的图片不能自适应img标签大小。img标签语法:<img src="url" alt="some_text">
URL 指存储图像的位置,alt 属性用来为图像定义一串预备的可替换的文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf‐8">
<title>http://www.xinbiancheng.cn</title>
</head>
<body>
<h2>html图像标签怎么使用</h2>
<img src="pic.png" alt="Pulpit rock" width="304" height="228">
</body>
</html>
如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)