css图片不配高度只配宽度，高度就会自动等比显示吗？

html-css0150

css图片不配高度只配宽度，高度就会自动等比显示吗？,第1张

默认情况下，图片只需要设置宽度，高度就会自动等比例调整，同理，只设置高度，宽度也会自动等比例调整，如果同时设置宽度和高度，那么就要自己计算好宽高比例，否则的话图片就有可能会发生变形。因此通常情况下宽度和高度只需要设置其中一项即可。

以上描述不适用于除图片外的其他元素。

这个最好用jquery写，示例：

<style type="text/css">

li{list-style:none}

#demo{width:200pxheight:200pxoverflow:hidden}

#demo ul li{width:200pxheight:200px}

</style>

<div id="demo">

<ul>

<li><img src="1.jpg" alt="1.jpg"/></li>

<li style="display:none"><img src="2.jpg" alt="2.jpg"/></li>

</ul>

</div>

<script src="此处引入jquery" type="text/javascript"></script>

<script type="text/javascript">

$(document).on("click","#demo ul li",function(){

$(this).css({"display":"none"})

$(this).siblings().css({"display":"block"})

})

</script>