Question

我正在制作响应式模板。我有包含图片的页面，我希望它们看起来像这样：http://www.chanel.com/fr_FR/

我无法找到一种实现它的方法，所以我尝试jquery虽然我不是最好的jquery编码器......

这就是我最终的结果： HTML

<html>
    <body>
        <div class="text" >
            <p>some text</p>
        <div>
        <div class="image" >
            <img class="adapt" src="my-image.jpeg" alt="my image">
        </div>
    </body>
</html>

 <script type="text/javascript" language="javascript">
        $(document).ready(function() {          
            function imageResize() { 
            var wrapH = $('div.image').height();
            var imgH = $('img.adapt').height();
            var wrapW = $('div.image').width();
            var imgW = $('img.adapt').width();
                $("img.adapt").css("height", (wrapH < imgH) ? wrapH : "auto");
                $("img.adapt").css("width", (wrapW < imgW) ? wrapW : "auto");
            }
            imageResize();
            $(window).bind("resize", function(){
                imageResize();  
            });  
        }); 

  </script>

CSS

div.text {
position : absolute;
width : 40%
left : 0;
top : 0;
}

div.image{
    position: absolute;
    top : 0;
    right : 0;
    left : 40%;
    width : 60%;
    bottom : 150px;
}

当我放大浏览器时，这似乎有效，但是当我使用它时，图像闪烁并且它的丑陋......

如果有一些专业的jquery编码器可以向我解释这个问题，我会非常满意。

Answer 1

如果您下载谷歌浏览器，浏览器再次访问该页面，并查看开发人员工具中的资源选项卡，请查看作者的styles.css文件。在800行及以下，您将看到作者正在使用媒体查询来获得您正在寻找的响应感。作者还利用百分比来设计元素和各种项目的宽度，高度，边距和填充。暂时还不需要jQuery。只需首先深入了解媒体查询的世界，即可获得真正的响应式设计。然后当你感到舒服时，继续通过jQuery应用一些创意动画来增加趣味性。

图像调整大小到浏览器，而不会裁剪或丢失纵横比

1 个答案: