Question

我有一个 264width / 264height

的div

我需要将 1600x1067 的图片放在div的中心

我不知道什么是最好的实践

   <div style="width:264px;height:264px">
<img> <!-- img with 1600px / 1067px -->
</div>

Answer 1

从维护的角度来看，在外部样式表中使用样式更好，所以将你的DIV样式放在.css文件中，如下所示：

div { width:264px; height:264px }

确保为此DIV元素指定ID或CLASS属性，否则所有DIV可能会以该大小结束。

可以通过多种方式设置图像。由于页面加载速度正常，我建议在编辑器（Illustrator，Photoshop ...）中将图像调整为264px X 264px，但在网页内部也可以这样做。

如果您决定在网页中重新调整图片大小，则几乎没有选项。使用外部.css（就像我上面的DIV一样），内部样式在该页面的标题内，作为内联样式（在示例中显示的方式）或HTML属性WIDTH和HEIGHT。与建议通过CSS完成的其他样式不同，图像宽度和高度属性通过使用这些属性更好。这是因为浏览器会在加载过程中将它们重新调整为该值，并且不会浪费时间计算相对宽度（以％为单位）或从外部工作表中加载它。

<强>定心：

将图像加载到具有预定义大小的容器中是不常见的。将图像包装在DIV容器中并且没有分配WIDTH和HEIGHT，但将其分配给图像是一种更好的做法。通过这种方式，图像将根据需要扩展DIV。例如：

CSS：

 div { position:relative }
 img { position:relative; margin:0 auto; padding: 5px; }

HTML：

<div>
    <img src="../whatever.jpg" width="254px" /> 
</div>

为了保持比例，我们保持原样。如果你做HEIGHT =＆＃34; 264px＆＃34;然后你的图像会拉伸并变形。
我们将宽度缩小到254px并添加5px的填充;这将使你的DIV最终宽度为264px，在距离图像边界的所有4种尺寸上都有5px填充。在这种情况下，DIV的高度将是1067/1600 * 264px。

如果添加凹槽或脊形边框，或者可能是圆形边框，则会获得非常好的效果。

以下是一些可能（或可能不）:)在此问题上提供更多帮助的链接： http://www.brenkoweb.com/tutorials/html/html-images-and-media/img-tag.php http://www.brenkoweb.com/tutorials/css/css-advanced/calculating-widths-and-margins.php

Answer 2

.my-size {
    width:264px;
    height:264px;
    border:solid 1px #e1e1e1;
}

.full-bg { 
  background: url(https://drscdn.500px.org/photo/97054699/m=2048_k=1_a=1/5bd4a9ac205fef91437ee596edda9362) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<div class='my-size full-bg'></div>

为什么不将图像设置为背景并使用background-size：cover来填充space like the example here或以下示例，示例中的图像实际上也是1600 x 1067 px。

background-size: cover;

这样，您使用的代码更少，并且总是在不扭曲图像的情况下完全填充DIV。

Answer 3

Flexbox for life：）

http://www.kirupa.com/html5/centering_vertically_horizontally.htm

没有理由不使用最新最好的CSS。

http://caniuse.com/#feat=flexbox

虽然如果您希望它始终覆盖整个区域，请使用前面提到的封面方法。

Answer 4

     <div class="thumbnail_wrapper">
       <img> <!-- img with 1600px / 1067px -->
      </div>

      .thumbnail_wrapper{
          width:264px;
          height:264px;
       }
       .thumbnail_wrapper img{
          display:block;
          margin:auto;
       }

Answer 5

下面是它的片段，显示颜色为#efefef的身体，然后是格雷的img div，以及灰色div中间的图像。

＆＃13;

    <style>
    .Box {width:50%;height:auto;background:gray;position:relative;}
    body {height:100%;width:100%;background:#efefef;}
    html {height:100%;width:100%;}
    .ImgDiv { width:264px;height:264px;position:relative;background:#efefef;margin-left:auto;margin-right:auto; }
    .Img { width:264px;height:264px;margin-left:auto;margin-right:auto;position:static; }
    </style>
<body>
<div class="Box">
    <div class="ImgDiv">
    <img class="Img" src="https://newevolutiondesigns.com/images/freebies/nature-hd-background-9.jpg"/>
    </div>
</div>
</body>

＆＃13;

希望这会有所帮助：）

如何在一个小div中居中大图？

5 个答案: