Question

我正在设计一个HTML和CSS的简单网站但却被卡住了。我希望我的网站在顶部有一个图像。在该图像之后出现的任何内容应该出现在图像下方，而不是在图像的顶部（就像它与背景图像一样）。图像应为视口高度的0.6（或其他部分）并居中。任何溢出的部分都应该被裁剪。但是，如果图像太窄，则应调整其大小以填充视口的整个宽度。它永远不应该改变它的期望比率。我还希望保持我的网站无脚本，并希望在源文件中包含无绝对值（如px）。< / p>

以下是我为解释我的想法而做的一些涂鸦：

图像高度设置为0.6vh。它居中。溢出的区域被裁剪。文字从底部开始。

图像高度将设置为0.6vh，但它不会覆盖整个视口的宽度。而是将图像宽度设置为与视口宽度（等于页面宽度）匹配，忽略0.6vh规则。文字仍然从底部开始。

我已经在互联网上搜索了两天，但我找不到我需要的东西。

另外，我正在尝试解决此问题：目前，我正在使用vh来设置图片的高度，但在移动浏览器上查看时却很奇怪，因为{{1}的值}地址栏崩溃时更改。

[编辑]

规则：

图像的最小宽度应为视口的宽度。
然后，如果可能，它的高度应匹配0.6 vh。

[编辑2]

我注意到，通过使图像居中并保持其纵横比，这些答案非常有用。但图像不应垂直裁剪。

另一个涂鸦：

我希望这个涂鸦能让我更容易看到我想要实现的目标。红线表示＆＃34; 0.6vh规则＆＃34;而蓝线表示＆＃34;最小宽度等于视口宽度＆＃34;规则。绿色矩形显示图像的位置。

[编辑4]

我在上一张图片中添加了一张图片和一些评论：

Answer 1

这样的方法怎么样：

＆＃13;

body,html {margin: 0;padding: 0}
* {box-sizing: border-box}

/*For the demo I've made the height below 30vh, you can change that to 6vh*/
/*Use background-size contain, if your image's height is larger that width*/
.Image-Banner {width: 100%;height: 30vh;background: url('https://i.stack.imgur.com/sj9LO.png') no-repeat 50%;background-size: cover}

.Main-Content {padding: 1em}

＆＃13;

<body>
  <header class='Image-Banner'></header>
  <main class='Main-Content'>
    <div>Foo Bar</div>
    <hr>
    <aside>Lorem Ipsum...</aside>
  </main>
</body>

＆＃13;

注意： 点击 Run Code Snippet 查看结果。

我相信这应该完全符合您的要求。

Answer 2

尝试在CSS中设置其属性，而不是使用图像标记。通过这种方式保持纵横比和居中更容易。您可能还需要指定最小和最大高度属性以确保事物看起来不错。

group_concat(distinct var)

    body{
      margin: 0; /* Stripping out margin and padding so .bg can be full width*/
      padding: 0;
    }
    .bg {
      box-sizing: border-box; 
      display: block; 
      width: 100%;  
      height: 60vh; /* 60vh = 60% of the viewport height*/
      padding: 0; /* No padding */
      margin: 0; /* No margins */
      background-image: url('http://www.naturheilpraxis-kaelin.ch/bilder/fruehling-01.jpg'); 
      background-repeat: no-repeat;
      background-position: center center;  
      background-size: cover; /* Cover all available space. */ 
      /* If you want the whole image visible try 'contain'*/
    }
    .main{
      padding: 0 1em; /* L/R padding to look nice */
    }

[编辑]

好！所以这是我能做的最好的事这不会垂直裁剪任何东西，也没有JS或硬值但是您必须使用基于图像需要确定的宽高比媒体查询。

这是宽高比媒体查询的公式 <body> <div class="bg"></div> <article class="main"> <h1>Your rad site</h1> <p>Notice how the image is centered and it keeps its aspect ratio.</p> </article> </body>，H = image height和W = image width的位置（以小数表示）。

H /（W /（D））

例如，我使用的图片是D = percent of the viewport used x 1000px。我们正在使用300px视口60%。{ 所以D = .6＆gt;＆gt; 1000 / (300 / (.6))＆gt;＆gt; 1000 / 500比率。

2/1

body,html,.container{
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  overflow: hidden;
  height: 60vh;
}

img {
  position: absolute;
  /* Position the image in the middle of its container. */
  /* Hack*/
  top: -9999px;
  right: -9999px;
  bottom: -9999px;
  left: -9999px;
  margin: auto;
  min-height: 100%;
  height: 100%;
}

@media only screen and (min-aspect-ratio:
2/1) { 
/*  Aspect ratio determined like so -- H / (W * (10/6)) */ 
  .container img{
    position: relative; /*Undoing the hack basically*/
    right: auto;
    top: auto;
    left: auto;
    bottom: auto;
    width: 100%; /*rather than the width get cropped, it's full. height is auto*/
}
  .container {height: auto; /* the image height determines the height */}
}

将其设为完整页面并调整浏览器大小以查看图像如何适应。我真的希望有所帮助！

Answer 3

根据您的信息创建了一个示例：

[Example][1]


  [1]: https://jsfiddle.net/2Lke94qn/1/

假设我们有两个div：

<div class="top">Top</div>
<div class="bottom">Bottom</div>

试试这种风格：

html, body{
  height: 100%;
}
.top{
  width: 100%;
  height: 60%;
  background-image: url("http://www.planwallpaper.com/static/images/HD-Wallpapers1.jpeg");
  background-position: center;
}
.bottom{
  background-color: grey;
  height: 40%;
}

CSS中的响应图像大小和位置

3 个答案:

[编辑]