让图片显示在div中，且超出部分隐藏，图片不变形，截取图片中心部分
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><title></title><style>html{background-color: antiquewhite;}.divContent{width:200px;height: 200px;bo
·
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
html{
background-color: antiquewhite;
}
.divContent{
width:200px;
height: 200px;
border:1px solid #ff5857;
overflow:hidden;
}
.divContent img{
margin:0;
padding:0;
width:100%;
height: 100%;
object-fit: cover;//重要
}
.yuanImg{
width:200px;
height: auto;
}
</style>
</head>
<body>
<p>图片一：长大于宽</p>
<div class="divContent">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592538352624&di=8ec5208316238c9c277a24ee4e7e0b19&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D3875739708%2C3556750963%26fm%3D193">
</div>
<p>图片二：长小于宽</p>
<div class="divContent">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592538461942&di=b4705a70067b74eacf85863a2283d366&imgtype=0&src=http%3A%2F%2Ft7.baidu.com%2Fit%2Fu%3D3867756944%2C286475832%26fm%3D193">
</div>
<p>以下为图片原来的样子</p>
<p class="yuanImg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592538352624&di=8ec5208316238c9c277a24ee4e7e0b19&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D3875739708%2C3556750963%26fm%3D193">
</p>
<p class="yuanImg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592538461942&di=b4705a70067b74eacf85863a2283d366&imgtype=0&src=http%3A%2F%2Ft7.baidu.com%2Fit%2Fu%3D3867756944%2C286475832%26fm%3D193">
</p>
</body>
</html>
效果图如下：
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)