Html 使猫头鹰旋转木马图像具有响应性

我试图让我的猫头鹰旋转木马能够响应（在Bootstrap-3中）。我尝试了宽度：100%，高度：自动，但没有成功。有没有可能让他们做出反应

我只在这里发布相关代码

。集装箱转盘{
宽度：100%
}
#主滑块。转盘。滑块img{
文本对齐：右对齐；
位置：绝对位置
}
#主滑块。转盘。项目{
背景职位：50%；
背景重复：无重复；
背景尺寸：封面；
左：0！重要；
不透明度：0；
排名：0；
位置：绝对位置；
宽度：100%；
显示：块！重要；
高度：730px；
边缘底部：20px；
-webkit转换：不透明度降低500毫秒；
-moz转换：不透明度在500ms内降低；
-o型过渡：不透明度降低500毫秒；
过渡：不透明度减小500毫秒
}
#主滑块。旋转木马。项目：第一个孩子{
顶部：自动；
职位：相对
}
#主滑块.carousel.item.active{
不透明度：1；
-webkit转换：不透明度降低500毫秒；
-moz转换：不透明度在500ms内降低；
-o型过渡：不透明度降低500毫秒；
过渡：不透明度降低500毫秒；
z指数：1
}
#主滑块。上一个，#主滑块。下一个{
位置：绝对位置；
最高：50%；
背景色：#c52d2f；
颜色：#fff；
显示：内联块；
利润上限：-25px；
高度：40px；
线高：40px；
宽度：40px；
线高：40px；
文本对齐：居中；
边界半径：0；
z指数：5
}
#主滑块。活动。动画。动画-项目-1{
-webkit动画：fadeInUp 300毫秒线性300毫秒两者；
-moz动画：fadeInUp 300毫秒线性300毫秒两者；
-o-动画：fadeInUp 300毫秒线性300毫秒两者；
-ms动画：fadeInUp 300毫秒线性300毫秒两者；
动画：fadeInUp 300毫秒线性300毫秒两者；
背景：#fff；
背景：rgba（255255.7）
}
#主滑块。活动。动画。动画-项目2{
-webkit动画：fadeInUp 300毫秒线性600毫秒两者；
-moz动画：fadeInUp 300毫秒线性600毫秒两者；
-o型动画：fadeInUp 300毫秒线性600毫秒两种；
-ms动画：fadeInUp 300毫秒线性600毫秒两者；
动画：fadeInUp 300ms线性600ms两者
}

您应该使用JavaScript获取屏幕宽度，然后使用它确定图像宽度：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">

<script>

$(function(){

var screenWidth = screen.width; //get the screen width in pixels
var pixelsPerPercentage = screenWidth*.01; //get the pixels per percentage
var imageWidthInPer = 50; //set the variable of the width of the image in percentages
var imageWidthInPix = imageWidthInPer*pixelsPerPercentage; //set the variable of the width of the image in pixels

$(#+"image").width(imageWidth+"px"); //set the width of the image in pixels

});

</script>

$（函数（）{
var screenWidth=screen.width；//以像素为单位获取屏幕宽度
var pixelspercentage=screenWidth*.01；//获取每百分比的像素数
var imageWidthInPer=50；//设置图像宽度的变量（以百分比表示）
var imageWidthInPix=imageWidthInPer*pixelspercentage；//设置以像素为单位的图像宽度变量
$（#+“image”）.width（imageWidth+“px”）；//以像素为单位设置图像的宽度
});

我只需将height:730px更改为height:auto即可解决此问题。

---

就是这样。

你所说的响应是什么意思？@frosty-图像根据设备尺寸、桌面、平板电脑、移动设备等进行适当缩放。你应该使用JavaScript获得屏幕宽度，然后使用它来确定图像宽度。@frosty-为什么使用JavaScript？我之所以使用Bootstrap-3，是因为它有效且有效？