關於Img標籤在固定寬高的容器內部以圖片比...

時間 2019-11-26

標籤關於 img 標籤定寬高的容器內部圖片欄目 HTML 简体版

原文原文鏈接

關於Img標籤在固定寬高的容器內部以圖片比例縮放存在

寫這篇文章對本身的想法作一些總結等

原由: 下載一些素材的時候看到排版方式是（下圖）的樣子，

並且圖片基本上都是沒有變形，扭曲就產生了"興趣",看了看源碼又本身想了幾種方式方法;

這個源代碼採用JS遍歷的方式對每個圖片進行佈局

而我打算採用 CSS進行圖片的樣式佈局（暫時只想到了三種方式）

（1）父級相對定位，子級絕對定位設置圖片居中等比顯示

[JavaScript]

純文本查看

複製代碼

<!DOCTYPE html>

<html lang= "en" >

<head>

<meta charset= "UTF-8" >

<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >

<meta http-equiv= "X-UA-Compatible" content= "ie=edge" >

<title>測試1111111</title>

<style>

*{margin:0;padding:0;}

div{

width: 200px;

height: 200px;

border: 1px solid #000;

margin-left: 15px;

margin-bottom: 15px;

float: left;

overflow: hidden;

position: relative;

}

div img {

position: absolute;

max-width: 100%;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto; /* 設置四個值爲零,margin:auto;能夠設置元素水平垂直居中 */

}

</style>

</head>

<body>

<div><img src= "./images/kul.jpg" alt= "" ></div>

<div><img src= "./images/lf.png" alt= "" ></div>

<div><img src= "./images/timg (1).jpg" alt= "" ></div>

</body>

</html>

（2）採用 img 標籤爲行內快的特性進行等比

[JavaScript]

純文本查看

複製代碼

<!DOCTYPE html>

<html lang= "en" >

<head>

<meta charset= "UTF-8" >

<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >

<meta http-equiv= "X-UA-Compatible" content= "ie=edge" >

<title>測試222222</title>

<style>

*{margin:0;padding:0;}

div{

width: 200px;

height: 200px;

line-height: 200px;

border: 1px solid #000;

margin-left: 15px;

margin-bottom: 15px;

float: left;

text-align: center;

overflow: hidden;

}

div img {

/*採用行內塊的特性進行圖片的垂直居中特性

圖片設置最大寬度和最小寬度;

vertical-align--> 文字對齊方式採用middle 居中

*/

max-width: 200px;

max-height: 200px;

vertical-align: middle;

}

</style>

</head>

<body>

<div><img src= "./images/kul.jpg" alt= "" ></div>

<div><img src= "./images/lf.png" alt= "" ></div>

<div><img src= "./images/timg (1).jpg" alt= "" ></div>

</body>

</html>

（3）採用 object-fit && object-position 的方式進行佈局；

這第三種方式我也是在網上找了一些資料查閱對這兩個屬性不清楚的同窗能夠查看張鑫旭大佬我的博客章節

半深刻理解CSS3 object-position/object-fit屬性

[JavaScript]

純文本查看

複製代碼

<!DOCTYPE html>

<html lang= "en" >

<head>

<meta charset= "UTF-8" >

<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >

<meta http-equiv= "X-UA-Compatible" content= "ie=edge" >

<title>測試3333333</title>

<style>

*{margin:0;padding:0;}

div{

width: 200px;

height: 200px;

border: 1px solid #000;

margin-left: 15px;

margin-bottom: 15px;

float: left;

overflow: hidden;

position: relative;

}

div img {

/* 寬高100%

設置的是 IMG 標籤的關於內容src的寬高屬性會根據內容自動填充,會產生不完整的現象

*/

width: 100%;

height: 100%;

object-fit:none; /* 默認狀況顯示 */

object-position: center; /* 圖片內容採用 center 方式進行居中 */

}

</style>

</head>

<body>

<div><img src= "./images/kul.jpg" alt= "" ></div>

<div><img src= "./images/lf.png" alt= "" ></div>

<div><img src= "./images/timg (1).jpg" alt= "" ></div>

</body>

</html>

--------------------- 做者：menKanXu 來源：CSDN 原文：https://blog.csdn.net/xutongze_111/article/details/83998407

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。