如何实现img2和img3的效果??不用背景??最简单的方式??
产品列表图太多 我想用懒加载 看懒加载的js回调都是给img设置src的 我自己修改懒加载的js设置背景,但是有时候图片出不来,不知道是不是自己改错什么了,..
现在请问如果不用背景,如何用src实现上述img2和img3的效果??
有简单的方法吗?
wenju
- 发布：2015-09-10 11:31
- 更新：2015-09-16 09:31
- 阅读：2428
wenju (作者) - https://www.mescroll.com -- 精致的下拉刷新和上拉加载组件
@小云菜 O(∩∩)O谢谢大神 经测试在Android机上部分不兼容 无效果~~~~(><)~~~~
<style>
.wrapper{
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
}
.wrapper img{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform:translate(-50%,-50%);
transform: translate(-50%,-50%);
}
</style>
<div class="wrapper">
<img src="http://ask.dcloud.net.cn/uploads/questions/20150907/bc2712e2eb6b985be5874ba6ef440750.jpg"/>
</div>wenju (作者) - https://www.mescroll.com -- 精致的下拉刷新和上拉加载组件
@DCloud_MUI_FXY
这个不是我的效果哦,您这个图片没有缩放
应该是缩放至宽度或者高度至少一个是完整的..
总之是如下效果:
试了一下 如果高宽不一样 只能用JS控制了。。。
.wrapper{
border: 1px #ddd solid;
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
}
.wrapper img{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform:translate(-50%,-50%);
transform: translate(-50%,-50%);
}
</style>
<div class="wrapper">
<img src="http://ask.dcloud.net.cn/uploads/answer/20150910/0e9ec481ec36e6528faf6e48ac891125.jpg"/>
</div>
<div class="wrapper">
<img src="http://ask.dcloud.net.cn/uploads/answer/20150915/ed9cb17122d0be10a6c74c92dad2434a.jpeg"/>
</div>
<script>
window.onload = function () {
var oDiv = document.getElementsByClassName("wrapper"),
img = document.getElementsByTagName("img"),
w = oDiv[0].offsetWidth;
console.log(w);
for (var i=0;i<img.length;i++) {
var imgW = img[i].offsetWidth,
imgH = img[i].offsetHeight;
if(imgW <= imgH){
img[i].style.width = "100%";
}
else{
img[i].style.height = "100%";
}
}
}
</script>这样体验不太好，或者可以尝试下图片一开始不显示，然后确定宽度之后再显示出来也行，要是有更好的解决办法要告诉我啊！
小云菜 - 相关代码及分享在http://www.cnblogs.com/phillyx
几种方式我都对比了一下，希望对你有帮助
图片使用帖子原图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<style type="text/css">
.img1 {
width: 100%;
}
.wrapper {
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
}
.wrapper img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.img-container {
width: 200px;
height: 200px;
border: 1px solid #000000;
}
.img4 {
width: 100%;
height: 100%;
object-fit: cover;
/*由于图片人物本身就不居中，通过左移对齐来处理*/
object-position: -70px 0;
}
.img-container5 {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
border: 1px solid #000000;
}
.img5 {
max-width: 100%;
height: auto;
vertical-align: middle;
}
</style>
<script type="text/javascript">
mui.ready(function() {
var oDiv = document.querySelectorAll(".wrapper")[1],
img = oDiv.querySelector('img'),
w = oDiv.offsetWidth;
console.log(w);
var imgW = img.offsetWidth,
imgH = img.offsetHeight;
if (imgW <= imgH) {
img.style.width = "100%";
} else {
img.style.height = "100%";
}
});
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">to-center</h1>
</header>
<div class="mui-content">
<br />
<p>原图</p>
<img src="images/target.jpg" />
<br />
<p>修改图1</p>
<div>
<img class="img1" src="images/target.jpg" />
</div>
<p>修改图2</p>
<div class="wrapper">
<img src="images/target.jpg" />
</div>
<p>修改图3</p>
<div class="wrapper">
<img src="images/target.jpg" />
</div>
<p>修改图4</p>
<div class="img-container">
<img class="img4" src="images/target.jpg" />
</div>
<p>修改图5</p>
<div class="img-container5">
<img class="img5" src="images/target.jpg" />
</div>
</div>
</body>
</html>