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

【问题标题】：Responsive image size and position in CSSCSS中的响应式图像大小和位置
【发布时间】：2017-07-31 23:15:00
【问题描述】：

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

这里有一些涂鸦来解释我的想法：

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

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

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

另外，我正在尝试解决这个问题：目前，我正在使用vh 设置图像的高度，但是在移动浏览器上查看时会变得很奇怪，因为vh 的值会在地址栏折叠。

[编辑]

规则：

图像的最小宽度应该是视口的宽度。
那么，如果可能的话，它的高度应该匹配 0.6vh。

[编辑 2]

我注意到，通过使图像居中并保持其纵横比，答案效果很好。但不应垂直裁剪图像。

另一个涂鸦：

我希望这个涂鸦能让我更容易看到我想要实现的目标。红线表示“0.6vh 规则”，而蓝线表示“最小宽度等于视口宽度”规则。绿色矩形显示图像应该在哪里。

[编辑 4]

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

【问题讨论】：

您什么时候想在布局之间来回跳转？这就像移动和桌面的东西吗？你怎么知道什么时候触发不同的外观？
这些只是示例。应针对任何视口大小调整图像。
不清楚你在问什么。这两种不同的布局，还是在满足某些条件时会变成另一种？第一个示例的宽度应该是多少？如果图像太窄，它如何/为什么会变成整个视口的宽度而不被拉伸？您实际尝试过的代码在哪里？
查看编辑。我希望我说清楚了我想要做什么。
查看我的更新答案！

标签： html css image responsive-design

【解决方案1】：

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

    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 */
    }

  <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>

[编辑]

好的！所以这是我能做的最好的。
这不会垂直裁剪任何东西，也没有 JS 或硬值但是你必须使用一个宽高比的媒体查询，你需要根据你的图像来计算。

这是长宽比媒体查询的公式其中H = image height、W = image width 和D = percent of the viewport used（以小数表示）。

H / (W / (D))

例如，我使用的图像是1000px x 300px。我们正在使用视口的60%，所以D = .6。
所以1000 / (300 / (.6)) >> 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 */}
}

<div class="container">
    <img src="http://placehold.it/1000x300" alt="" />
</div>

使其成为整页并调整浏览器大小以查看图像如何适应。我真的希望这会有所帮助！

【讨论】：

也许在你的模型中使用真实的图像会让你想要的效果更清晰。现在很抱歉，我无法理解您想要什么。
啊，谢谢。我终于想我明白你想要什么了。在非常宽的屏幕上，如果需要，您希望图像高度超过原始 60vh，以保持图像的整个高度可见。对吗？
*在视图中保持图像的全宽 - 是的

【解决方案2】：

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

[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%;
}

【讨论】：

那么问题出在哪里？
见fiddle。没关系，直到视口比图像宽。在这种情况下，应该调整图像的大小，使其宽度与视口宽度相匹配，而不是垂直重复。
对不起。我的意思是水平重复。
建议使用至少 1600px 宽度的背景图片。你在找这个吗：[链接] (jsfiddle.net/besartm/6zb15v2a)

【解决方案3】：

这样的方法怎么样：

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}

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

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

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

【讨论】：

我测试了here，但是图像的纵横比正在改变。我需要修复它。
已更改，附评论
如果没有 javascript，除非您始终知道图像的宽度为 6vh，否则您所要求的内容是不可能的
好吧，我想我将不得不在我的源代码中使用绝对值。我希望我的网站能够在没有脚本的情况下运行。
正是为什么我没有调整我的答案以包含 JS 来匹配它。您可以采用两种方法，您可以让网站随着网页宽度的增加而扩大图像的高度（溢出切断），或切断宽度溢出（随着高度的增长/缩小）。通过增加的增强功能使背景与图像的边缘相匹配（因此您无法分辨图像的结束位置）