关于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