<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta id="viewport" name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">
<link rel="shortcut icon" href="img/jujianguan28x28.png" />
<meta name="description" content="重庆人才网" />
<meta name="keywords" content="重庆人才网" />
<title>CSS 将img图片填满父容器div，自适应容器大小</title>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
}
div img {
position: absolute;
top: 50%;
left: 50%;
display: block;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641369739&t=ab30e55d464424e3716bd999f2a7c550"
alt="55">
</div>
</body>
</html>
CSS - 将img图片填满父容器div，自适应容器大小
最新推荐文章于 2024-09-20 11:20:30 发布
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
