SEO笔记

控制div中图片自适应与宽度限定值 高度自动方式

2025年11月13日 23:24 # Htm

图片在后台上传后,前台显示效果需要将图片固定在一个范围内进行等比显示,协助seo优化显示不失真。

我们在使用css 控制div或者class中图片自适应大小的方法:

1、图片与div或者class同样缩放大小,高度自动:

<img src="/file/LFI 2018.jpg" style="width:100%; height: auto;"/>

以上可以解决图片在页面中宽度统一,并且还能解决图片在 手机、平板、pc 端 显示自适应的问题。

2、图片大小不超出宽度制定值,高度自动:

<img src="/file/LFI 2018.jpg" style="width:100%; max-width:500px; height: auto;"/>

以上可以解决图片在已知知div或者class中 最大宽度 500px 定义后不会让css页面框架变形。