html css 如何把 未知大小的 图片 放在 最大高度为100*150的框框内,实现图片居中显示, 等比例缩

html-css016

html css 如何把 未知大小的 图片 放在 最大高度为100*150的框框内,实现图片居中显示, 等比例缩,第1张

给图片固定的宽和高。那么不管他什么尺寸,都会按设置的这个尺寸来显示。

<div id="div"><img src="*******.jpg" width="100" border=1 height="150" ></div> #div {height: 100pxtext-align: centervertical-align: middleline-height: 100pxborder:1 solid red}

img {vertical-align: middleline-height: 100px}

img标签里面只写width或者height,这样大的就会按比例缩小,当然小的就会自己放大了

解决这个问题可以用js,首先判断这幅图的长或者是宽,要是大于指定的宽度或者长度,就给这幅图添加属性width=“xxx”或者height=“xxx”,要是小于指定的宽度或者长度,就不添加任何属性