Question

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

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

这是我的示例图片850x1000px：

网站例如它应该如下所示，然后浏览器窗口的大小为1350x650：

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

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

图像完全可见。

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

如何实现？我是否可以仅使用css或javascript进行此操作？

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

Answer 2

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

编辑添加＆＃34; align-self：stretch;＆＃34;财产到右栏

编辑是的，当然。忘了添加＆＃34;身高：100％＆＃34;到图像容器

Answer 3

您可以使用此css

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

在浏览器上调整大小图像的页面调整大小

3 个答案:

常见解决方案

新解决方案