让图片显示在div中，且超出部分隐藏，图片不变形，截取图片中心部分

最新推荐文章于 2022-12-08 15:14:57 发布

玺..

最新推荐文章于 2022-12-08 15:14:57 发布

阅读量4k

点赞数 3

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/F_mengze/article/details/106849225

版权

前端专栏收录该内容

90 篇文章 1 订阅

订阅专栏

<!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>

效果图如下：
在这里插入图片描述

玺..

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
让图片显示在div中，且超出部分隐藏，图片不变形，截取图片中心部分

<!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;
复制链接

扫一扫