Question

创建单页面自适应网站。借助此代码，为我的主页实现了幻灯片演示：

<script class="secret-source">
    jQuery(document).ready(function($) {
        $('#banner-fade').bjqs({
            height      : 600,
            width       : 1450,
            responsive  : true
        });
    });
</script>

HTML：

<div id="banner-fade">

    <!-- start Basic Jquery Slider -->
    <ul class="bjqs">
      <li><img  src="<?php print $directory?>/img/a.png" ></li>
      <li><img src="<?php print $directory?>/img/ban1.png" ></li>
      <li><img src="<?php print $directory?>/img/example2.jpg"></li>
    </ul>
    <!-- end Basic jQuery Slider -->

</div>...

这里的幻灯片放映工作正常，但是当我将该代码放在屏幕尺寸为17英寸的设备中时，容器变得响应，但该容器内的图像没有响应。任何人都可以帮助我们吗？

Answer 1

尝试CSS：

.bjqs img { min-width:100%; min-height:100%; }

还可以使用：

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

Answer 2

你必须用％来定义图像的大小。那应该

Answer 3

 <div id="image_div">
            <img src="images/firstimage.jpg" width=100% align="left">
 </div>

CSS for image_div as;

#image_div{
width:60%;
float:left;
}

百分比将根据您的屏幕尺寸更改内容的大小。根据您的意愿使用宽度和其他属性。

如何根据每个设备的屏幕尺寸制作图像

3 个答案: