0

I am working on a responsive template. I have pages with images and I want them to look like this : http://www.chanel.com/fr_FR/

I can't figure out a css way to achieve it so I am trying jquery although I ain't the best jquery coder...

This is what I end up with : 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;
}

This seems to work when I enlarge the browser but when I make it smaler, the image flickers and its ugly...

If some pro jquery coder can explain this problem to me, I would be very graitfull.

4

1 回答 1

1

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

于 2013-04-08T14:48:40.477 回答