css設定圖片固定寬高,按比例縮放
設定圖片固定寬高,按比例縮放
<style>
.setimage {
overflow: hidden;
position: relative;
width: 400px; //圖片固定寬度
height: 300px; //圖片固定高度度
background: black;
}
.setimage > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*top: 50%;left: 50%;, 是以左上角為原點,故不處於中心位置
translate(-50%,-50%) 作用是,往上(x軸), 左(y軸)移動自身長寬的 50%,以使其居於中心位置
*/
</style>
<div class="setimage">
<a href="#" class="image featured"><img src=@w.Image alt="" /></a>
</div>
相關文章
- 如何設定圖片高度固定,寬度可以根據比例縮放
- 圖片縮放(不裁剪,按原來比例計算寬高)
- css實現圖片按寬等比例縮放不變形CSS
- 給圖片設定了固定寬高還會被壓縮
- css中圖片按照長寬比縮放CSS
- css實現固定的圖片比例CSS
- css 實現圖片寬度自適螢幕,高度與寬度成固定比例CSS
- CSS實現背景圖片固定寬高比自適應調整CSS
- JavaScript圖片簡單等比例縮放JavaScript
- 圖片等比例縮放裁切詳解
- 純css實現高度與寬度固定比例CSS
- CSS之寬高比例佈局CSS
- 移動端圖片等比例縮放實踐
- Vue3等比例縮放圖片元件Vue元件
- CSS 圖片固定長寬比實現高度自適應CSS
- JavaScript DOM元素長寬等比例縮放JavaScript
- Windows設定圖片縮圖Windows
- 縮放圖片至固定大小,尺寸不足以0填充
- CSS行內元素設定寬高CSS
- Android 圖片處理之固定視框中的等比例壓縮Android
- CSS實現圖片等比例縮小不變形CSS
- 我的前端元件 —- 16:9固定寬高比例的div前端元件
- 如何使用純CSS實現固定寬高比div?CSS
- CSS 設定<img>圖片樣式CSS
- html+css 設定背景圖片HTMLCSS
- SwiftUI圖片處理(縮放、拼圖)SwiftUI
- 圖片實現寬高比
- android imageview 縮放檢視圖片AndroidView
- css如何為圖片設定圓角CSS
- css圖片縮放失真出現鋸齒的如何解決呢?CSS
- win10 自定義縮放比例被鎖定怎麼辦_win10 自定義縮放比例被鎖定如何解決Win10
- 圖片寬高自動適配
- three:按比例縮放向量multiplyScalar()
- Flutter FractionallySizedBox 按比例設定Widget的尺寸FlutterFractionZed
- css設定按鈕心跳收縮後,按鈕文字上下抖動,如何解決?CSS
- opencv 圖片幾何變換-縮放OpenCV
- CSS3 設定多個背景圖片CSSS3
- 《你不知道的 CSS》之等比例縮放的盒子CSS