Question

我遇到了一个问题，当我调整窗口大小时，我的图像没有响应。我尝试通过将图像放在html标签之间并使用CSS 100％宽度的图像来修复它，但它不能很好地工作。

之后我尝试了background-size: cover;和background-size: contain;。如果这样做它响应，但高度太小。我希望图像显示全高，而不是400px或其他东西。当我放入height: 100vh;或height: 100%;时，它没有响应。

nav {
    background:#fff;
    width:100%;
    height:120px;
}
nav#menu{
    clear: both;
    padding-top: 1.5em;
    }

.js nav#menu {
    overflow: hidden;
    max-height: 0;
    }

nav#menu.active {
    max-height: 25em;
    }

nav#menu ul {
    margin: 0;
    padding: 0;
    }

nav#menu li a {
    display: block;
    padding: 1.2em;
    text-decoration: none;
    }
nav#menu li a:hover{
  color:#668bc3;
    }

#intro {
    background-image: url(../images/hero2.jpg);
    background-repeat: no-repeat;
    height:100vh;
    background-size:cover;
    width:100%;
    }

 <header id="intro">
  <a href="#menu" class="menu-link">
     <i class="fa fa-bars" aria-hidden="true"></i>
  </a>
  <nav id="menu">
    <div class="navsvg"><img src="images/logo.svg" alt="logo"></div>
    <ul>  
      <li><a href="#intro">Introduction</a></li>
      <li><a href="#howitworks">How it works</a></li>
      <li><a href="#download">Download</a></li>
      <li><a href="#prototype">Prototype</a></li>
      <li><a href="#posts">Posts</a></li>    
      <li><a href="#contact">Contact</a></li>        
    </ul>
  </nav>
    
</header>

关于如何修复它的任何想法？

非常感谢任何帮助！

Answer 1

contain会留下空格，cover会剪掉一些内容，100% 100%会拉长。你不能用图片不成比例地满足一切。（它甚至不可能有意义）。

解决此问题的最佳方法是使用媒体查询更改为不同屏幕尺寸的不同比例图像。

实施例

@media screen and (max-width: 480px) {
    #intro {
        background-image: url(../images/hero-mobile.jpg); /* Example Image */
    }
}

Answer 2

让响应式图像始终填充元素而不进行裁剪或拉伸非常困难。 特别是当有内容限制/要求时，即元素必须至少由于内容而高或宽。

因此，我认为background-size: cover;可能是您的最佳选择。它将裁剪您的图像，但它会确保它填充元素。

为了减少一些裁剪，尝试提供与其将应用的元素具有相似的纵横比的图像，即不要使用方形或纵向图像作为10倍的元素尽可能宽 - 很多都会被裁剪，如下所示。

您可以使用媒体查询来提供具有更优化的宽高比的图像版本，甚至艺术指导（稍微关注图像的某个区域）。

＆＃13;

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul {
  display: flex;
}
li {
  padding: 0 0.5rem;
}

.x-axis,
.y-axis,
.sorta-optimized {
  display: flex;
  align-items: center;
  margin: 5rem auto;
  max-width: 800px;
  min-height: 100px;
  border: 2px dashed rebeccapurple;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.x-axis {
  background-image: url( 'https://unsplash.it/600/300/?image=100' );
}
.y-axis {
  background-image: url( 'https://unsplash.it/300/600/?image=100' );
}
.sorta-optimized {
  background-image: url( 'https://unsplash.it/400/100/?image=100' );
}

@media (min-width: 400px) {
  .sorta-optimized {
    background-image: url( 'https://unsplash.it/600/100/?image=100' );
  }
}

@media (min-width: 600px) {
  .sorta-optimized {
    background-image: url( 'https://unsplash.it/800/100/?image=100' );
  }
}

＆＃13;

<div class="x-axis">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

<div class="y-axis">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

<div class="sorta-optimized">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

＆＃13;

下面是我在上面的代码段中使用的参考图像。

.x-axis图片

.y-axis图片

.sort-optimized图片 - 伪艺术导演并尝试＆＃34;匹配＆＃34; 宽高比与元素大小。

Answer 3

尝试给出这样的图像样式，看看是否有效：

@media screen and (max-width: 769px) { #intro { height: 100%; max-width: ?px; }}

添加@media规范将确保样式将影响屏幕宽度为769px及以下的设备。您需要指定您更喜欢的宽度来代替问号。

希望这有帮助！

背景图像响应

3 个答案:

实施例