浏览器上具有可调整大小图像的页面调整大小答案

【问题标题】：Page with resizable image on browser resize浏览器上具有可调整大小图像的页面调整大小
【发布时间】：2016-12-06 15:23:08
【问题描述】：

我想创建一个具有不同寻常效果的简单网站。

页面上的文字将垂直居中，页面右侧将有一个图像。应裁剪图像以适合浏览器宽度。

这是我的示例图片 850x1000px：

以网站为例，它应该看起来像这样，然后浏览器窗口的大小为 1350x650：

如您所见，图像被裁剪（顶部、底部和右侧）

这是另一个窗口大小为 1920x1080 的示例：

图像完全可见。

网站http://rollpark.us/ 上的效果类似 - 当窗口较小时，停车场的图像会被裁剪。

如何做到这一点？我可以只使用 css 还是需要 javascript？

【问题讨论】：

如果某个答案解决了您的问题，请将其标记为已接受

标签： javascript jquery html css image

【解决方案1】：

常见解决方案

css

img {
  max-width: 100%;
  height: auto;
}

html

<!DOCTYPE html>
<html lang="en">
  <body>
    <img src="http://placekitten.com/g/600/900" width="600" height="900">
  </body>
</html>

工作示例（调整浏览器窗口的大小以查看图像将如何缩放）：https://jsfiddle.net/mattiascaricato/zgzmmxxp/

使用max-width: 100% 和height: auto，图像将自动调整到浏览器窗口的最大宽度。如果必须，它会缩小，但永远不会放大到大于其原始尺寸。

一种新的解决方案

使用新的 HTML5 标签<picture>。它允许您根据视口高度和宽度加载完全不同的图像。但请记住这是一项实验性技术。查看https://developer.mozilla.org/en/docs/Web/HTML/Element/picture了解更多信息

例子

<picture>
    <source srcset="small-image.jpg" media="(max-width: 768px)">
    <source srcset="default-image.jpg">
    <img srcset="default-image.jpg" alt="Example image">
</picture>

【讨论】：

【解决方案2】：

.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center; 
  align-items: center;
  min-height: 100vh;
  width: 100%;
}
.flex-column {
  max-width: 50%;
  min-width: 50%;
  -webkit-flex-basis: 50%;  
  flex-basis: 50%;
}
.flex-column.right-area { // Added
  -webkit-align-self: stretch;
  align-self: stretch;
}
.image-container {
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

<div class="flex-container">
  <div class="flex-column left-area"><span>Your text goes here</span></div>
  <div class="flex-column right-area">
    <div class="image-container" style="background-color:#f00;"></div>
  </div>  
</div>

已编辑添加了“对齐自我：拉伸；”属性到右列

已编辑是的，当然。忘记在图像容器中添加“高度：100%”

【讨论】：

它还没有工作。在浏览器中使用“检查元素”时，它说图像容器的大小为 944.5 x 0

【解决方案3】：

你可以使用这个css

img{
  height: 100%;
  overflow: hidden;
}

【讨论】：