Question

我有一个带有图片的div和另一个div。我可以上传任何大小的图像，但有一些规则： 1）如果我上传了专辑图片（宽度>高度），则图片被裁剪为246x246像素并居中; 2）如果我上传了一张肖像照片（高度>宽度）并且其高度超过328px，则图片会被裁剪并居中;

我已经尝试了很多不同的方法来解决问题，但是它不会起作用，有时候图片会重叠在它下面的白色div。谢谢你;

<!DOCTYPE>
<html>
    <head>
        <style type="text/css"> 
            body { 
                padding:0; 
                margin:0; 
                font-family: 'Helvetica', arial; 
                font-size:15px; 
                color:{color:Text}; 
                background:orange; 
            } 


            #container { 
                margin: 20px 400px;

                -webkit-box-sizing: border-box; 
                -moz-box-sizing: border-box;    
                box-sizing: border-box; 

                overflow: hidden; 
                padding: 17px; 
                position: fixed; 

                width: 280px; 
                height: 800px;

                background: black;


            } 



        #container  #logo {
            display: block;
            width:246px;
            max-height:328px; 
            min-height:246;


            margin: 0 0 17px;
            border: 3px solid red;
        }

        #white {
            width: 246px;
            height: 320px;
            background: white;
        }
        </style>
    </head>

    <body>
        <div id="container">
            <center>

                    <img src="{image:Picture}" id="logo" />

                    <div id="white">
                    </div>

            </center>
        </div>
    </body>
</html>

找到解决方案！但这不仅仅是我在寻找的东西。伙计们，还需要你的帮助！这仅适用于高度固定的情况，但我需要的高度范围为256px到328px！

#container {
            width:246px;
            height:328px; 

            background:url(absbsb.jpg) no-repeat center;
            background-size: cover;
        }

Answer 1

尝试此解决方案

＆＃13;

    img {
        background: #fff;
        border: 1px solid #999;
        height: 50px;
        width: 100px;
    }
    html, body { height: 100%; box-sizing: border-box; }
    .container { 
        width: 100%;
        height: 100%;
    
        background: #eee;
        
      display: -webkit-box;
      -webkit-box-orient: horizontal;
      -webkit-box-pack: center;
      -webkit-box-align: center;
     
      display: -moz-box;
      -moz-box-orient: horizontal;
      -moz-box-pack: center;
      -moz-box-align: center;
      
      display: box;
      box-orient: horizontal;
      box-pack: center;
      box-align: center;
    }

＆＃13;

<div class="container">
        <img src="/logo.png"/>
    </div>

＆＃13;

在灵活的div中垂直和水平居中图像

1 个答案: