wenju
wenju
  • 发布:2015-09-10 11:31
  • 更新:2015-09-16 09:31
  • 阅读:1713

小白求教,如何用最简单的方式实现如下效果,不用背景~~~~(>_<)~~~~

分类:MUI
mui

如何实现img2和img3的效果??不用背景??最简单的方式??

产品列表图太多 我想用懒加载 看懒加载的js回调都是给img设置src的 我自己修改懒加载的js设置背景,但是有时候图片出不来,不知道是不是自己改错什么了,..

现在请问如果不用背景,如何用src实现上述img2和img3的效果??
有简单的方法吗?

2015-09-10 11:31 负责人:无 分享
已邀请:
小云菜

小云菜 - 相关代码及分享在http://www.cnblogs.com/phillyx

试一试object-fit:cover

有关object-fit的介绍在这w3cPlus

wenju

wenju (作者) - http://www.mescroll.com -- 精致的下拉刷新和上拉加载js框架. 主流APP案例, 一套代码多端运行~ 问题咨询请发私信哈~

附上原图,给大家测试;;O(∩_∩)O谢谢大神 (@ο@) 哇~

wenju

wenju (作者) - http://www.mescroll.com -- 精致的下拉刷新和上拉加载js框架. 主流APP案例, 一套代码多端运行~ 问题咨询请发私信哈~

@小云菜 O(∩∩)O谢谢大神 经测试在Android机上部分不兼容 无效果~~~~(><)~~~~

  • 小云菜

    在部分低端机上可能不兼容

    2015-09-10 14:45

  • wenju (作者)

    回复 小云菜:华为mate7 Android4.4.2版本 这个感觉不算特别低端啦 貌似要Android5.0以上才比较好的兼容哦

    2015-09-10 15:32

DCloud_UNI_FXY

DCloud_UNI_FXY

<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

wenju (作者) - http://www.mescroll.com -- 精致的下拉刷新和上拉加载js框架. 主流APP案例, 一套代码多端运行~ 问题咨询请发私信哈~

@DCloud_MUI_FXY


这个不是我的效果哦,您这个图片没有缩放

应该是缩放至宽度或者高度至少一个是完整的..
总之是如下效果:

  • DCloud_UNI_FXY

    取决于你的图片宽高比,如果大部分都是比较宽的。那就给img加上max-height:100%;

    反之max-width:100%

    2015-09-10 15:41

  • wenju (作者)

    回复 DCloud_UNI_FXY:O(∩_∩)O谢谢大神指点 但是产品的图片 大小不一 这个..得用js判断 设置...是有些麻烦 是可行

    2015-09-10 15:55

开心就好

开心就好

我觉得可以参考Hello MUI示例里面的setting模块设置头像那一段的代码,和你的需求比较接近

感受呼吸

感受呼吸

试了一下 如果高宽不一样 只能用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>

这样体验不太好,或者可以尝试下图片一开始不显示,然后确定宽度之后再显示出来也行,要是有更好的解决办法要告诉我啊!

  • wenju (作者)

    我还是用背景控制 现在用的还不错 灵活性很高 而且不用div嵌套

    2015-09-15 19:41

小云菜

小云菜 - 相关代码及分享在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>

该问题目前已经被锁定, 无法添加新回复