html中如何讓圖片等比縮小

⑴ html怎麼控制，才不會讓圖片自動換行

1. 圖片都有固定的大小 到一定的距離是 會因為瀏覽器的位置不足，而自動換行，如果不讓換行 那麼就只有設置百分比，比如一行有5張圖片，那麼就把寬度以100%個一個單位值，5張圖片等比分配20%。然後圖片寬度為100%。那麼隨著瀏覽器的窗口大小縮放而縮放。如圖
   

⑵ css中如何調整插入背景圖片的大小

可以通過cover和contain來對圖片進行伸縮。

語法：

background-size:auto;/* 默認值，不改變背景圖片的高度和寬度 */

background-size:100px 50px;/* 第一個值為寬，第二個值為高，當設置一個值時，將其作為圖片寬度來等比縮放 */

background-size:10%;/* 0％~100％之間的任何值，將背景圖片寬高按百分比顯示，當設置一個值的時候同也將其作為圖片寬度來等比縮放 */

background-size:cover;/* 將背景圖片等比縮放填滿整個容器 */

background-size:contain;/* 將背景圖片等比縮放至某一邊緊貼容器邊緣 */

(2)html中如何讓圖片等比縮小擴展閱讀：

CSS背景圖片自適應、全屏、填充、拉伸

方法一：js控制

<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">

<img src="pictures/background.jpg" height="100%" width="100%"/>

</div>

<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10.jpg" height="100%" width="100%"/></div>

<script type="text/javascript">

$(function(){

$('#formbackground').height($(window).height());

$('#formbackground').width($(window).width());

});

</script>

方法二：全瀏覽器兼容

.bg{

background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);

filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";

-moz-background-size:100% 100%;

background-size:100% 100%;

}