html - CSS 图像裁剪然后调整大小

标签 html css

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

最佳答案

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

2 个包装器是必需的,因为您不能同时制作 100% 和 min-width: 1000px 的 div。您可以使用 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 */
}

关于html - CSS 图像裁剪然后调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27335352/

相关文章:

javascript - 悬停悬停文本框在选中时保持固定

html - Bootstrap v2 Accordion 与 bootstrap v3 - 哪个类(class)发生了变化?

javascript - 获取动态创建的文本

javascript - 有谁知道好的ajax脚本加载器

html - 如何像这样对齐文本和按钮,bootstrap

javascript - 将输入复选框的选中属性绑定(bind)到字段

javascript - 使用 canvas API 复制 CSS border-radius

css - 有没有办法相对于元素的中心定位背景图像?

html - 标签显示略低于表单复选框?

css - 图像缩放和动画改进