Question

作为今天的设计师，我今天生活中最大的障碍之一就是将图像放在适合所有设备上所有浏览器的网页上。只是为了适应一个图像我试图创建一个像下面的代码，并按高度检查，并确保图像适合和图像在屏幕的中间。我想要的是在屏幕中间放置一个600x894的图像，无论设备和浏览器如何。如果屏幕尺寸较小，那么图像也应该更小。什么是最好的方法？

img {position:absolute;left:50%;top:50%;display:block;}
@media only screen and (max-height : 600px)  {img{width: 389px;height: 580px;margin-left: -194px;margin-top: -290px}}
@media only screen and (max-height : 700px)  {img{width: 456px;height: 680px;margin-left: -228px;margin-top: -340px}}
@media only screen and (max-height : 800px)  {img{width: 524px;height: 780px;margin-left: -262px;margin-top: -390px}}
@media only screen and (max-height : 900px)  {img{width: 591px;height: 880px;margin-left: -295px;margin-top: -440px}}

Answer 1

您可以执行以下操作。尝试调整浏览器的大小，并根据屏幕的宽度查看它的调整大小，并始终居中。

html, body { height: 100%; width: 100%; margin: 0; }

div {

  display: block;

  background: red;

  height: 100%;

  position: relative;

}

img {

  max-width: 100%;

  max-height: 100%;

  margin: 0 auto;

  width: auto;

  display: block;

}

<div>
  <img src="http://fc06.deviantart.net/fs17/i/2007/149/0/4/fire_wolf_by_frenky666.jpg">
</div>

Answer 2

<style type="text/css">
img{
display: block;
margin: 0 auto;
max-width: 100%;
}


<img src="http://static.jsbin.com/images/dave.min.svg" alt="">

http://jsbin.com/wusoxilero/1

基于设备正确设置图像大小的最佳方法

2 个答案: