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

问题描述

我坚持在类的背景中制作响应式图像.网站 .尝试在 380px 宽度以下查看它，因为那是问题发生的时候.我希望图像在小于 380 像素时正确可见.

我希望所有图像都变小并位于中心并在 380 像素以下正确对齐，但我明白了:

.

如果你能帮我，我将不胜感激

解决方案

我找到了答案.它是由用户发布给我的.所以如果其他人遇到任何麻烦，我会分享它:

所以为了不在评论中包含所有内容，我发布了答案.

屏幕/视口宽度为 380 像素及以下的问题"有几个问题.

在你的外部

和 slider-wrapper3 类(它是将 iPhone 作为背景图像的那个)你应该在你的 CSS 中使用以下内容:

.slider-wrapper3 {背景大小:包含；/* 你使用封面 */背景重复:不重复；/* 保留其余的实际代码 */}

并删除宽度设置(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屋！