Question

我的图像缩放和居中有问题。我想制作图像（带有文字设计和代码），例如：Example我在网上查找了这个，我做了很多例子，我不能这样做我的最后一个版本是{ {3}}当我更改浏览器视图时，最小的图像不像saaleedesign.com那样居中。如何在浏览器调整大小后居中设置img？

Answer 1

所以基本上你应该把背景位置设置为中心。

HTML：

<div class="container">Text</div>

的CSS：

#container {
   background-image: url("img.jpg");
   height: [some-height]px;
   width: 100%;
   background-position: center center;
   background-size: cover;
}

Answer 2

这是真正中心的方式：

DEMO - http://codepen.io/vsync/pen/DpmnK

以下是如何在身体标签上使用的非常简洁的极简主义示例

HTML

<img src="image.jpg">

CSS

img{
    position:absolute;
    z-index:-1;
    top:50%;
    left:50%;
    width:100%;
    transform:translate(-50%, -50%); 
}

img.max{ width:auto; height:100%; }

/* RESET & stuff */
html, body{ height:100%; overflow:hidden; }
*{ margin:0; padding:0; }

JS

// this part detects when the window width is too narrow for the current image aspect-ratio, and fits it to height 100% instead of width 100%.
var photo     = document.images[0],
    container = document.body;

$(window).on('resize.coverPhoto', function(){
  requestAnimationFrame(checkRatio);
});

function checkRatio(){
  var state = photo.clientHeight <= container.clientHeight && 
              photo.clientWidth >= container.clientWidth;

  photo.classList[state ? 'add' : 'remove']('max');
}

Answer 3

您可以指定图像所需的宽度。

整个技巧基于使用百分比度量。

这是一个非常简单的解决方案，无论它有什么版本，都可以在每个浏览器中使用。

示例：

  html, body{
        height: 100%;
        width: 100%
        display: block;
    }
    
    img{
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

   <body>
       <img src="http://simswiki.info/images/f/f8/Under_construction.png" width="50%">
   </body>

如何使img缩放和居中？

3 个答案:

DEMO - http://codepen.io/vsync/pen/DpmnK

HTML

CSS

JS