Question

我想让我的图像居中并适合设备的屏幕。到目前为止，它在移动设备上工作得非常好，因为它们的纵向方向，但在台式机上，您必须滚动才能看到整个图像。

以下是我的网站Click Here

HTML CODE

<!DOCTYPE html>
<html>
<head>
<title>Outdoor Photography</title>
<link rel="icon" href="site-icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="Grant Birkinbine, Birki, Grant, Photography, Outdoors" />
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
</head>
<body>

        <img src="/images/The-Canyon.jpg">

</body>
</html>

CSS

@media screen and (max-width: 320px) {
  /* Smaller Devices */
  img{
    width: cover;
    max-width: 100%;
    height: cover;
  }
}
@media screen and (min-width: 374px) and (max-width: 376px) {
  /* iPhone 6 */
  img{
    width: cover;
    max-width: 100%;
    height: cover;
  }
}

@media screen and (min-width: 319px) and (max-width: 321px) {
  /* iPhone 5 */
  img{
    width: cover;
    max-width: 100%;
    height: cover;
  }

}

@media screen and (min-width: 359px) and (max-width: 361px) {
  /* Galaxy S7 */
  img{
    width: cover;
    max-width: 100%;
    height: cover;
  }
}

@media screen and (min-width: 481px) {
  /* Desktops */
  img {
  width: cover ;
  max-width: 100% ;
  height: cover ;
  }
  .resize {
   width: 1024px; /* 1024 */
   height: auto; /* 682 */  
  }


  .container {
    margin: 0 auto;
    width: 1260px;
    height: 1365px;
    line-height: 115px;
    text-align: center;
    border: 0px solid red;
   }


}

body {
   background-color: gainsboro;
}

Answer 1

将以下规则添加到您的img风格

margin: 0 auto;
display: inherit;

Answer 2

宽度和高度是否具有覆盖属性值？我不相信这些是有效的价值观。 Chrome无论如何都会抱怨。

从HTML的角度来看，我建议使用它的css样式设置背景大小模式来覆盖。

尝试将此作为您的DIV风格并使用背景位置：

background-image: url(/images/The-Canyon.jpg);
background-size: cover;
background-position-y: 0%;

Answer 3

要在不改变宽高比的情况下以全屏显示图像，请使用position:fixed图像max-width: 100%; max-height: 100%;使图像适合屏幕

body{
  margin:0;
}
img{
    width: cover;
    max-width: 100%;
    height: cover;
    max-height: 100%;
    position: fixed;
}

<!DOCTYPE html>
<html>
<head>
<title>Outdoor Photography</title>
<link rel="icon" href="site-icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="Grant Birkinbine, Birki, Grant, Photography, Outdoors" />
</head>
<body>

        <img src="http://www.grantbirki.me/images/The-Canyon.jpg">

</body>
</html>

Answer 4

所以你有2个选项，你可以去背景图像路线，它会在更大的屏幕上裁剪它，但总体看起来更好看。或者居中的浮动图像。

背景图片路线

HTML

<div class="fill-screen"></div>

CSS

.fill-screen{
  width:100%;
  height:100vh;
  background-image:url("http://www.grantbirki.me/images/The-Canyon.jpg");
  background-size:cover;
  background-repeat:no-repeat;
}

<强> JSFiddle

居中的图片路线 HTML

<body><img src="/images/The-Canyon.jpg"></body>

CSS

img{
  height:100vh;
  width:auto;
  margin:0 auto;
  display:block;
  }

<强> JSFiddle

Answer 5

你可以看一下对象：https://css-tricks.com/almanac/properties/o/object-fit/ / https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

＆＃13;

html,
body,
img {
  height: 100%;
  width: 100%;
  margin: 0;
}
img {
  object-fit: contain;
  display:block;
}
/* or 
 body{
  margin: 0;
}
img {
  height: 100vh;
  width: 100vw;
  object-fit: contain;
  display:block;
}
*/

＆＃13;

<img src="http://www.grantbirki.me/images/The-Canyon.jpg">

＆＃13;

您在整页中播放代码段并调整浏览器大小以查看行为或使用：http://codepen.io/anon/pen/aBqOLa

将图像居中并使其适合网站上的屏幕（非常简单）

5 个答案: