Css - 如何停止带有尺寸覆盖的图像缩放? [英] Css - how to stop image scalling with size cover?

问题描述

我正在为宽度超过 2560 像素的屏幕创建简单的媒体.我的问题是我有标题并且超过 2600px 我将静态宽度设置为我的标题，当我调整窗口大小超过 2600px 标题有 2600px 宽度但图像正在调整大小.如何设置相对于标题宽度而不是屏幕宽度的图像大小??

#header {位置:相对；高度:100vh；.背景图片 {位置:绝对；顶部:0；左:0；高度:100%；宽度:100%；背景图片:url('~/images/17.jpg');背景尺寸:封面；背景附件:固定；过滤器:亮度(50%)；-webkit-filter: 亮度(50%);}}@media only screen and (min-width: 2600px) {#header {宽度:2600px；边距:0 自动；高度:1000px；.背景图片 {宽度:2600px；}}}

解决方案

问题在于 background-attachment: fixed; 导致背景随视口缩放.根据 MDN，

<块引用>

背景相对于视口是固定的.即使元素具有滚动机制，背景也不会随元素移动.(这与 background-clip 不兼容: 文本.)

显然，它也与 background-size:cover 不兼容.

解决方案:重置媒体查询中的background-attachment.

这是带有解决方案的 codepen.
或者，对于喜欢代码片段的人来说，一个代码片段(仅使用编译的 SCSS).

body {边距:0；}#header {位置:相对；高度:100vh；}#header .background-image {位置:绝对；顶部:0；左:0；高度:100%；宽度:100%；背景图片:网址(https://placehold.it/900x300")；背景尺寸:封面；背景附件:固定；过滤器:亮度(50%)；-webkit-filter: 亮度(50%);}@media only screen and (min-width: 600px) {#header {宽度:600px；边距:0 自动；高度:190px；}#header .background-image {背景附件:初始；/* 新的 */}}

<div class="background-image">你好

</section>

请注意，我稍微更改了尺寸以进行测试；断点现在是 600 像素而不是 2600 像素，因为我没有那么宽的显示器.所以你不必复制整个代码，带有背景附件的新行就足够了.

I'm creating simple media for screens over 2560px in width. My problem is that I have header and over 2600px I set static width to my header, when I resize window over 2600px header have 2600px width but image is resizing. How to set image size relative to header width, not to screen width??

#header {
  position: relative;
  height: 100vh;
  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url('~/images/17.jpg');
    background-size: cover;
    background-attachment: fixed;
    filter: brightness(50%);
    -webkit-filter: brightness(50%);
  }
}
@media only screen and (min-width: 2600px) {
  #header {
    width: 2600px;
    margin: 0 auto;
    height: 1000px;
    .background-image {
      width: 2600px;
    }
  }
}

解决方案

The problem is with background-attachment: fixed; which causes the background to scale with the viewport. According to MDN,

The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn't move with the element. (This is not compatible with background-clip: text.)

And neither is it compatible with background-size: cover, apparently.

Solution: reset the background-attachment in the media query.

Here is a codepen with the solution.
Or, for people who prefer snippets, a snippet (only with the SCSS compiled).

body {
  margin: 0;
}

#header {
  position: relative;
  height: 100vh;
}
#header .background-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url("https://placehold.it/900x300");
  background-size: cover;
  background-attachment: fixed;
  filter: brightness(50%);
  -webkit-filter: brightness(50%);
}

@media only screen and (min-width: 600px) {
  #header {
    width: 600px;
    margin: 0 auto;
    height: 190px;
  }
  #header .background-image {
    background-attachment: initial;   /* new */
  }
}

<section id="header">
  <div class="background-image">
    hello
  </div>
</section>

Note that I changed the sizes a bit to allow me to test; the breakpoint is now at 600px rather than 2600px, since I don't have that wide a monitor. So you don't have to copy the whole code, the new line with the background-attachment is enough.

这篇关于Css - 如何停止带有尺寸覆盖的图像缩放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！