[英]how to set image width for responsive image slider using JQuery and Javascript
I want to make responsive image slider for my website using Jquery and Javascript. 我想使用Jquery和Javascript为我的网站制作自适应图像滑块。
<div>
<ul>
<li>
<img src="#" alt="Slider Image" />
</li>
<li>
<img src="#" alt="Slider Image" />
</li>
<li>
<img src="#" alt="Slider Image" />
</li>
</ul>
</div>
My question is how to set the image width
. 我的问题是如何设置图像
width
。 I set image width
for 100%
and height
for auto
. 我将图像
width
设置为100%
,将height
为auto
。
I set div width
for 100%
, but when I resize the screen, the image is not responsive. 我将div
width
设置为100%
,但是当我调整屏幕大小时,图像没有响应。
I want to learn from scratch instead using plugins possible. 我想从头开始学习,而不是使用可能的插件。 How can I solve this problems?
我该如何解决这个问题?
You can achieve this by simply setting in your CSS something like this: 您可以通过在CSS中简单地设置以下内容来实现此目的:
img {
display:block /*fix inline gap - optional*/
max-width:100%; /* the trick is here - setting max-width instead of width */
height:auto;
}
See snippet below with your code: 请参见下面的代码片段:
img { display: block; max-width: 100%; height: auto; } /*demo styles*/ ul { padding: 0; margin: 0; } li { margin: 0; list-style: none }
<div> <ul> <li> <img src="//lorempixel.com/1600/900/sports" alt="Slider Image" /> </li> <li> <img src="//lorempixel.com/1600/900/city" alt="Slider Image" /> </li> <li> <img src="//lorempixel.com/1600/900/food" alt="Slider Image" /> </li> </ul> </div>
no need to use jQuery/JavaScript 无需使用jQuery / JavaScript
Bro ,my advice to you is to use the plugin called bxSlider ( fully responsive ) slider. 兄弟,我对您的建议是使用名为bxSlider(完全响应)滑块的插件。 Easy for use and easy understandable.You can set modes, make adaptiveHeight...and much more options I personally was trying to make my own slide , after hours of a lot nervous I've decided to use that plugin.
易于使用且易于理解。您可以设置模式,设置adaptiveHeight ...以及我个人试图制作自己的幻灯片的更多选项,经过数小时的紧张之后,我决定使用该插件。 click here for downloading bxSlider !
单击此处下载bxSlider!
Here's a fiddle of what you are looking for - assuming it's not a background image. 这是您要寻找的东西-假设它不是背景图像。
https://jsfiddle.net/WebDevelopWolf/u6vompp2/ https://jsfiddle.net/WebDevelopWolf/u6vompp2/
Basically, the code you need to make your images responsive is: 基本上,使图像具有响应性所需的代码是:
img {
width:100%;
height:auto;
}
If it's a background image though then the you'll need: 如果是背景图片,则需要:
div {
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
background:url('http://www.abstract-thinking.co.uk/img/logo.jpg')
}
that is because you haven't given a width
and height
for your image 那是因为您没有给图片指定
width
和height
so for your div
, you have given width:100%
and height:auto
, (if you want you can give any px
or %
value for your div
) 因此,对于您的
div
,您给定了width:100%
和height:auto
,(如果您愿意,可以为div
给出任何px
或%
值)
then for your image inside the div
give width
and height
for it ( div img
says images
inside the div
tag) 然后为
div
内的图片提供width
和height
( div img
表示div
标签内的images
)
div img{
width:100%;
height:100%
}
in here, child element takes the full widh and height of it's parent element.hope this will help to you. 在这里,子元素具有其父元素的全部宽度和高度。希望这对您有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.