Question

我正在重新设计一个有趣的网站，我正在搞乱一些JQuery和一些CSS效果。当您单击箭头时，页面上的所有内容都会被按下并显示视频。问题是我试图为图像创建一个部分。但是，更改图像的背景大小以覆盖最终会使整个图像占据屏幕。如果我手动更改图像的大小，则图像会失真。

这是HTML：

<section id="content">
  <img src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466799500/background_image_mjh10z.jpg"class="stuff"> </img> 
  <h1>Click the arrow to view Kai Greene's Scar Story</h1>
 <span class="msg"><button = class="btn btn-danger">Sign up for our News Letter</button></span>

</section>
<article class="buy">
  <h1 class="products text-center">View other products</h1>
</article>
</div>

这是CSS：

.stuff{
  margin-top: 100px; 
  background-soze: cover; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0; 
}

您可以在codepen上查看整个代码：http://codepen.io/sibraza/pen/wWgqBO

Answer 1

您可能需要手动更改图像的大小。将宽度设置为某个值并将高度设置为自动或反之亦然不应扭曲图像。因此，将宽度或高度设置为自动不应使图像失真。

http://www.w3schools.com/css/css_rwd_images.asp是CSS中图像大小调整的有用资源

Answer 2

使用background-size或width来设置所需的图像尺寸，而不是height。无论您设置的尺寸如何，您都可以使用object-fit: cover来保持图像宽高比。它就像做一个“裁剪”效果。

网站的一个部分中的图像占据整个页面

2 个答案: