Html / Css调整大小和裁剪作为浏览器大小更改 [英] Html/Css resize and crop as browser size changes

问题描述

我最近在做一个项目，感谢一个友好的教程，我设法找到以下代码。

CSS p>

  html {
 background：url（images / bg.jpg）no-repeat center center fixed; 
 -webkit-background-size：cover; 
 -moz-background-size：cover; 
 -o-background-size：cover; 
 background-size：cover; 
} 
  

此代码调整背景图片的大小，使图片填满整个屏幕同时保持正确的比例，并且如果图像的一部分大于屏幕，则裁剪图像。

我遇到的问题是，我需要将图像放在跟随背景的网页上。 （覆盖与浏览器的背景相同的区域调整大小，总是相同的比例...）但是所有的方法，我试过，没有一个工作，我想知道如果可能的话。

$ b

解决方案 div>

使用background-size：cover。

  .sizedbkgrd {
 position：absolute; 
 top：0px; 
 left：0px; 
 bottom：0px; 
 right：0px; 
 background-image：url（http://i3.photobucket.com/albums/y89/Aden93/dance-party.jpeg）; 
 background-repeat：no-repeat; 
 background-size：cover; 
} 
  

使用该类创建div。

 < div class =sizedbkgrd>< / div> 
  

jsFiddle：

http://jsfiddle.net/alforno/gXdRf/

I'm doing a project recently and thanks to a friendly tutorial, I managed to find the following code.

CSS

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

This code resizes the background image so that the image will fill up the entire screen while maintaining the correct ratio, and it does it while cropping the image if a part of the image is larger than the screen.

The problem I have is that I need to put images on the webpage that "follows" the background. (covers the same area on the background as browser resizes, always same ratio...etc) But of all the methods I've tried, none of them works, and I am wondering if this if possible.

Or in other words, is it possible to achieve the same effect not by making the image a background?

解决方案

Use "background-size: cover".

.sizedbkgrd {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom:0px;
  right:0px;
  background-image: url(http://i3.photobucket.com/albums/y89/Aden93/dance-party.jpeg);
  background-repeat: no-repeat;
  background-size:cover;
}

Create a div with that class.

<div class="sizedbkgrd"></div>

jsFiddle:

http://jsfiddle.net/alforno/gXdRf/

这篇关于Html / Css调整大小和裁剪作为浏览器大小更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！