“background-size：contains”内的响应DIV缩放。图片 [英] Responsive DIV scaling within "background-size: contain" image

问题描述

UPDATED 01/01/15

问题：

我有一个集中的背景图像缩放与 background-size：包含。我想要有DIV（用于链接等）覆盖在背景上，并且还可以在浏览器调整大小时使用所述背景进行缩放，而且相对于该背景的大小保持定位。

在下面提供的Fiddle中，红色边框显示导航栏应该存在的位置，绿色边框显示Home按钮应该在哪里。

strong>更新/进度：当浏览器调整为窄垂直窗口时，我可以在所有方案中适当缩放（除了）。

小提琴：

原创小提琴： http://jsfiddle.net/tc4hoLft/

新小提琴： http://jsfiddle.net/w5xjkj4e/1/

  html，body {
 background：＃000; 
 width：100％; 
 height：100％; 
 margin：0 auto; 
 overflow-x：hidden; 
} 
 .bg {
 height：100％; 
 background-image：url（'https://placekitten.com/350/325'）; 
 background-position：center; 
 background-repeat：no-repeat; 
 background-size：contains; 
 margin：0 auto; 
} 
 .navbar {
 position：relative; 
 width：100％; 
 height：14％; 
 top：75％; 
 margin：0 auto; 
 border：1px solid red; 
} 
 #home {
 position：absolute; 
 top：0; 
 left：21.5％; 
 width：7％; 
 height：100％; 
 display：block; 
 border：1px solid green; 
} 
  

JS： b

  $（window）.on（resize，function（）{
 
 var width = $（'。bg'） .width（）; 
 var height = $（'。bg'）。height（）; 
 
 var imgWidth = width> height？350/325 * height：width; 
 var imgHeight = height> width？325/350 * width：height; 
 var imgTop; 
 
 $（'。navbar'）。css（{
'width '：imgWidth，
'height'：imgHeight * .15，
}）; 
 
}）; 
  

解决方案

我仍然有唯一的问题是当我使浏览器窗口垂直非常窄，DIVs下移，不能保持正确定位。

更新的小提琴此处。

我使用JavaScript来获取实际的背景图片大小，然后根据这些结果计算DIV的大小和位置。

  $（window） resize，function（）{
 
 var width = $（'。bg'）。width（）; 
 var height = $（'.bg'）。height b 
 $ b var imgWidth = width> height？350/325 * height：width; 
 var imgHeight = height> width？325/350 * width：height; 
 var imgTop; //需要对这个
 
 $（'。navbar'）进行计算css（{
'width'：imgWidth，
'height'：imgHeight * 
}）; 
 
}）; 
  

UPDATED 01/01/15

Problem:

I have a centered background image that is scaling with background-size: contain. I would like to have DIVs (for links, etc.) that overlay on the background and also scale with said background whenever the browser is resized, but also stay positioned relative to that background's size.

In the Fiddle provided below, the red border shows where the navbar should exist and the green border shows where the 'Home' button should be. Resize your browser window as far as you can both horizontally, then vertically -- you should see how the bars do not stay positioned properly over the image at certain extremes.

Update/Progress: I have it scaling appropriately in all scenarios except when the browser is resized to a narrow vertical window. Then the navbar and home DIVs shift downward and don't stay positioned relative to the image.

Fiddle:

Original Fiddle: http://jsfiddle.net/tc4hoLft/

New Fiddle: http://jsfiddle.net/w5xjkj4e/1/

Code:

CSS:

html, body {
    background: #000;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow-x: hidden;
}
.bg {
    height: 100%;
    background-image: url('https://placekitten.com/350/325');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
}
.navbar {
    position: relative;
    width: 100%;
    height: 14%;
    top: 75%;
    margin: 0 auto;
    border: 1px solid red;
}
#home {
    position: absolute;
    top: 0;
    left: 21.5%;
    width: 7%;
    height: 100%;
    display: block;
    border: 1px solid green;
}

JS:

$(window).on("resize", function() {

    var width = $('.bg').width();
    var height = $('.bg').height();

    var imgWidth = width > height ? 350/325 * height : width;
    var imgHeight = height > width ? 325/350 * width : height;
    var imgTop;

    $('.navbar').css({
        'width': imgWidth,
        'height': imgHeight * .15,
    });

});

解决方案

I'm actually somewhat close, I think. The only problem I am still having is when I make the browser window very narrow vertically, the DIVs shift down and don't stay positioned properly.

Updated Fiddle here.

I'm resorting to JavaScript to get the actual background image size, then calculating the DIV's size and position based on those results.

$(window).on("resize", function() {

    var width = $('.bg').width();
    var height = $('.bg').height();

    var imgWidth = width > height ? 350/325 * height : width;
    var imgHeight = height > width ? 325/350 * width : height;
    var imgTop; //need to do calculations on this

    $('.navbar').css({
        'width': imgWidth,
        'height': imgHeight * .15,
    });

});

这篇关于“background-size：contains”内的响应DIV缩放。图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！