响应式图像的响应式容器答案

【问题标题】：Responsive container for responsive image响应式图像的响应式容器
【发布时间】：2013-09-18 21:40:49
【问题描述】：

目前我有一个滑块，其中包含在调整窗口大小时会调整大小的图像。图像重新调整大小很好，但是在重新调整大小时会显示滑块容器的棕色背景。我希望能够使容器与图像一起重新调整大小，以便根本不显示棕色背景。

到目前为止，滑块的容器已经设置了高度。我设置了高度，因为没有高度，当幻灯片过渡时，容器会跳到高度 0 一秒钟，使布局有点小故障和移动。如果没有设置滑块容器的高度，事情会重新调整大小，但会出现布局故障。

我怎样才能没有布局故障和在不显示背景颜色的情况下重新调整大小的滑块容器？

这里是可以找到滑块的网站的链接：http://lab.stickywebz.com/plantsource/

这是我用于滑块的 javascript：

$(document).ready(function(){
ShowPostDiv(0);
});

function ShowPostDiv(divIndex)
{
$(".herocontent").hide();

if(divIndex >= $(".rotate_hide").length)
{
    divIndex = 0;
}

var divPostHtml = $(".rotate_hide:eq("+divIndex+")").html();
$(".herocontent").html(divPostHtml); 
$(".herocontent").fadeIn(1000).delay(6500).fadeOut(1000);

divIndex++;
setTimeout("ShowPostDiv("+divIndex+")", 8500);
}
$(document).ready(function(){
   ShowPost();
});

这是我用于滑块区域的一些 css：

#hero { width: 100%; position: relative; height: 450px; color: #fff; background-color: #bb9a71; overflow: hidden; }
.hero_img { width: 100%; }
.hero_img img { width: 100%; height: 100%; }

【问题讨论】：

标签： javascript html css responsive-slides

【解决方案1】：

像这样添加 id="hero_content"

<div id="hero_content" class="herocontent" style="display: block;">

并像这样在每个图像标签中添加 id="image"（共 4 个）

 <img id="image" width="1800" height="450" src="http://lab.stickywebz.com/plantsource/wp-content/uploads/2013/08/HeroSlide1-1800x450.jpg" class="attachment-hero wp-post-image" alt="HeroSlide1">

function ShowPostDiv(divIndex)
{

$(".herocontent").hide();  
if(divIndex >= $(".rotate_hide").length)
{
divIndex = 0;
}

var divPostHtml = $(".rotate_hide:eq("+divIndex+")").html();
$(".herocontent").html(divPostHtml);          
$(".herocontent").fadeIn(1000).delay(6500).fadeOut(1000);
var widthdiv=$("#hero_content").width();
var heightdiv=$("#hero_content").height();
var diff=widthdiv/heightdiv;

if(heightdiv>320&&diff<3)
{
heightdiv=widthdiv/3;
  if(heightdiv<320)
  {
  heightdiv=320;
  }
$('#hero').height(heightdiv);

widthdiv=widthdiv+'px';
heightdiv=heightdiv+'px';

$('#image').attr('style','width:'+widthdiv+'!important;height:'+heightdiv+'!Important');
 }
 divIndex++;
 setTimeout("ShowPostDiv("+divIndex+")", 8500); 
}

图像显示它已根据 div 重新调整大小..我提到 minheight=320 因为 minheight 低于 320 到 div 会导致 description() 隐藏..

【讨论】：

【解决方案2】：

我通过更改一些 javascript 解决了我的问题。滑块英雄区域的 CSS 如下：

.hero_img {width: 100%; }
.hero_img img { width: 100%; height: 100%; }

我修改了javascript如下：

$(document).ready(function(){
   ShowPostDiv(0);
});

function ShowPostDiv(divIndex)
{
//$(".herocontent").hide();

if(divIndex >= $(".rotate_hide").length)
{
    divIndex = 0;
}

var divPostHtml = $(".rotate_hide:eq("+divIndex+")").html();
$(".herocontent").html(divPostHtml); 
//$(".herocontent").fadeIn(1000).delay(6500).fadeOut(1000);
$(".herocontent").fadeTo(1000,1).delay(6500).fadeTo(1000,0.01);

divIndex++;
setTimeout("ShowPostDiv("+divIndex+")", 8500);
}
$(document).ready(function(){
   ShowPost();
});

css 修复了调整大小的问题，但布局仍然出现故障/跳跃，因为在幻灯片转换期间，包含的 div 将为空，因此它的高度将变为 0px，而显示将无。导致容器清空的原因是在javascript中...... .hide() 和fadeOut() 将显示更改为无，导致布局跳转。所以我所做的是一起删除 .hide() 语句，而不是使用fadeIn() 和fadeOut()，我使用了fadeTo，而不是一直褪色到0，我褪色到0.01，它仍然看起来像完全淡出，但没有清空容器。

现在，我可以很好地调整容器大小和过渡。

【讨论】：