CSS 图像裁剪,然后调整大小



对于我的网站,我有一个图像,它与页面的整个宽度相同,并动态调整大小以适应浏览器大小。但是,我希望图像裁剪到某个点,然后调整大小,而不是完全缩放图像。就像在"自由职业者"网站上一样(如果你把浏览器变小)。我想实现这一点,如果可能的话使用 CSS。

我不确定您要实现的裁剪操作。但是,这是使用两个包装器的基本解决方案:

2 个包装器是必需的,因为您不能同时制作div 100% 和最小宽度:1000px。您可以使用 css 选择器来删除标签汤。但这是最简单的解决方案。

http://jsfiddle.net/ty2kgm0u/2/

VYI - jsfiddle很难测试,因为你真的需要在完整的html页面上测试它。

<body>
  <div class="wrapper">
    <!-- Background will show up here -->
  </div>
</body>

.CSS:

body {
 width: 100%;
}
body .wrapper {
 min-width: 1000px;
 height: 80px;
 background: red; /* Use a background image to test it out fully */
}

相关内容

最新更新