CSS img自適應div大小

2022-05-11 06:19:16 字數 1468 閱讀 4384

**如下：

doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>哈哈


title


>


<


style


>


.div0 


.div1 


.bg1


.div2 


.bg2


.div3 


.bg3


style


>


head


>


<


body


>


<


div 


class


="div0"


>


<


img 


src="img/qt_img/sa_4.png"


/>


div>


<


div 


class


="div1"


>


<


img 


class


="bg1"


src="img/qt_img/sa_4.png"


/>


div>


<


div 


class


="div2"


>


<


img 


class


="bg2"


src="img/qt_img/sa_4.png"


/>


div>


<


div 


class


="div3"


>


<


img 


class


="bg3"


src="img/qt_img/sa_4.png"


/>


div>


body


>


html


>
執行結果：

注：max-height(用來設定指定元素的最大高度)：這個屬性會阻止 height 屬性的設定值變得比 max-height 更大。

min-height(用來設定指定元素的最小高度)：這個屬性會阻止 height 屬性的設定值變得比 min-height 更小。 當 height 屬性設定的高度小於該屬性的值時，則 height 屬性會失效。

max-height 過載（覆蓋掉） height, 但是 min-height 又會過載（覆蓋掉） max-height。即min-height 會將 max-height和 height的值都覆蓋掉。

CSS img自適應寬高

使用css3屬性object fit，參考部落格css3 object fit屬性 假設乙個img為寬200px，高150px，不對img屬性做任何處理，會被拉伸，如下圖所示 為了不讓被拉伸，可以居中顯示在固定的寬高內 200px 150px 通常解決辦法是寫在乙個div內，為div設定以下屬性 b...

div滾動框，自適應大小

在最近的專案中需要在頁面展示許多的字段資訊 不下30個 而且有的字段會比較長，不使用滾動框幾乎無法瀏覽。但是使用者不希望整個頁面都帶滾動框，因此只有在展示資料的列表中使用div來實現滾動效果，由於div實現了滾動必須確定其大小或者div的父元素中有確定大小的存在，所以在不同解析度的瀏覽器中表現的大小...

自適應大小

原文出處忘了 自適應大小一般分為對話方塊自適應大小和控制項自適應大小。1.對話方塊自適應大小 在螢幕 高度和寬度是螢幕的一半 int cx getsystemmetrics sm cxscreen int cy getsystemmetrics sm cyscreen movewindow m hw...