0

私はレスポンシブテンプレートに取り組んでいます。画像付きのページがあり、次のようにしたい: http://www.chanel.com/fr_FR/

私はそれを達成するためのcssの方法を理解できないので、私は最高の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コーダーがこの問題を私に説明できるなら、私は非常に感謝しています.

4

1 に答える 1