使分区图像响应 [英] Make division image responsive

问题描述

我在网页。尝试查看它下面的380px宽度，因为这是当问题发生。
我希望图片在小于380像素时可以正常显示。

我想让所有图片变得更小，位于中心，正确对齐380px但我得到这个：

如果你能帮助我，我会非常感谢。

解决方案

我发现了答案。它是由一个用户发布到我。如果任何人遇到任何麻烦，我分享它：

所以，

屏幕上的问题 - 视口宽度为380像素及以下有几个问题。

在您的外部< div> 与类 slider-wrapper3 （它是一个持有iPhone作为背景图像）你应该使用下面的CSS：

  .slider-wrapper3 { 
 background-size：contains; / *你使用cover * / 
 background-repeat：no-repeat; 
 / *保留您实际代码的其余部分* / 
} 
  

至少为您的小屏幕布局删除宽度设置（ width：310px; ）！

然后修正了容器的位置和大小（以及背景图片）。

因此，您仍然需要调整图片大小（可能是在滑块脚本中，无论图像的尺寸来自何处）。

I am stuck in making images inside background of a class responsive.The website url .

It would be very helpful if you could help me out i am using bootstrap and nivo slider. The css and the html that i am using for the slider are given below.

The css:

   .slider-wrapper { 
     width: 310px; 
     height: 650px;
     background: url("images/iPhone.png") center center ;
     background-size:cover;
    }

    .nivoSlider {
      position:relative;
      width:290px;
      height:512px;
      top:60px;
      bottom:65px;
      left:23px;
      right:24px;
      overflow: hidden;
    }
    .nivoSlider img {
      position:absolute;
      top:0px;
      left:0px;
      width:100%;
      height: 100%
    }

The html:

    <div class="slider-wrapper ">
    <div id="slider" class="nivoSlider">

    <img src=""  />
    <img src=""  />
    </div>
    </div>

And a screenshot of the above code (with additional html ) on a laptop:

Here is the website url. Try viewing it below 380px width as that's when the problem occurs. I want the image to be visible properly at less than 380px.

I want the all the images to become smaller and be in the center and properly aligned below 380px but i get this:

.

I would be more than thankful if you could help me out

解决方案

i found the answer.It was posted to me by a user.So I'm sharing it if anyone else gets into any trouble:

"So to not have all the things in the comments I post an answer.

The "problem" on screen-/ viewport widths of 380px and below has several issues.

On your outer <div> with the class slider-wrapper3 (it's the one which holds the iPhone as background image) you should use the following in your CSS:

.slider-wrapper3 {
   background-size: contain; /* you use cover */
   background-repeat: no-repeat;
   /* keep the rest of your actual code */
}

and remove the width setting (width: 310px;) at least for your small screen layout!

By doing so you have then fixed the position and size of the container (and also the background image).

So you still need to adjust the image sizes (probably in your slider script, or wherever the image's dimensions come from)."

这篇关于使分区图像响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！