使用 css 在 div 中调整背景图像的大小

下面的 css 在两个 div 上设置了一个单独的背景; 如果图像不适合 div 大小，它们会重复自己。

如何使用 css 扩展图像以适应 div 所需的空间？

<style type="text/css">
#contentMain {
margin-bottom: 5%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
background: url( /jQuery/mypage/img/background1.png )
}
#page1 {
background: url( /jQuery/mypage/img/background2.png )
}
</style>
205941 次浏览
小开
最佳答案

Answer

You have multiple options:

  1. background-size: 100% 100%; - image gets stretched (aspect ratio may be preserved, depending on browser)
  2. background-size: contain; - image is stretched without cutting it while preserving aspect ratio
  3. background-size: cover; - image is completely covering the element while preserving aspect ratio (image can be cut off)

/edit: And now, there is even more: https://alligator.io/css/cropping-images-object-fit

Demo on Codepen

Update 2017: Preview

Here are screenshots for some browsers to show their differences.

Chrome

preview background types chrome

Firefox

preview background types firefox

Edge

preview background types edge

IE11

preview background types ie11

Takeaway Message

background-size: 100% 100%; produces the least predictable result.

Resources

小开

With the background-size property in those browsers which support this very new feature of CSS.

小开

i would recommend using this:

  background-repeat:no-repeat;
background-image: url(your file location here);
background-size:cover;(will only work with css3)

hope it helps :D

And if this doesnt support your needs just say it: i can make a jquery for multibrowser support.


提交答案