0

私がここで話しているページをチェックしてください: http://willy-ward.com/fashion

基本的に、ユーザーがブラウザのサイズを変更して最大化したときに、写真を現在の縦横比に保つ方法がわかりません。

私はCSSを少しいじっていますが、正しく理解できないようです。それはかなり簡単なことだと確信しています。その URL をチェックして、ブラウザ ウィンドウのサイズ変更によって写真がどのように影響を受けるかを確認してください。高さ 100% と幅の自動が正しく機能していないようですか?

別の問題として、このページの画像の下に要素がないにもかかわらず、画像の下に余分な余白があります。そこで少し戸惑います。

質問が雄弁でなかったらすみません、疲れるにつれて私の英語力は少し落ちます。

助けてくれてありがとう！

これが私が現在持っているコードです：

        jQuery(document).ready(function() { 
            jQuery(".photoStrip").width(0);
            jQuery(".photoContainer img").load(function(){
                jQuery(this).css({'visibility':'hidden','display':'block'});
                var newWidth = jQuery(this).width();
                jQuery(this).css({'visibility':'visible','display':'none'});
                jQuery(".photoStrip").width(function(index, width){
                    return width + newWidth + 20;
                });
                jQuery(this).parent().css({
                    'width' : newWidth
                });             
                jQuery(this).fadeIn(800);
            }).each(function(){
                if(this.complete) jQuery(this).trigger("load");
            });

            jQuery(window).bind("resize", function(){
                jQuery(".photoStrip").width(0);
                jQuery(".photoContainer").each(function(){
                    var newWidth = jQuery("img", this).width();
                    jQuery(this).css({
                        'width' : newWidth
                    });
                    jQuery(".photoStrip").width(function(index, width){
                        return width + newWidth + 20;
                    });
                });              
             });
        });
4

2 に答える 2

0

URI の例を見たところ、次のようになりました。

HTML

<html>
<head>
<title>Image</title>

<body>
    <div class="wrapper">
        <img src="http://upload.wikimedia.org/wikipedia/en/2/2b/1_WTC_rendering.jpg">
    </div>
</body>


</head>
</html>

CSS

html, body {
    height: 100%;
}
.wrapper {
    height: 100%;
    padding-right: 20px;
    display: inline;
    white-space: nowrap;    
}
img {
    max-width: 100%;
    width: auto;
    height: 100%;   
}

Willy Ward のサイトとまったく同じことを行います。.wrapper の高さは、その親に依存します。この場合、それは

于 2012-08-10T11:52:59.777 に答える
0

私はあなたの問題の解決策だと思うもので簡単なjsfiddleを作成しました。お役に立てば幸いです。http://jsfiddle.net/QfHF6/

<html>
    <head>
    <title>Image</title>

    <script type="text/javascript">

    function resizeImage()
    {
        var window_height = document.body.clientHeight
        var window_width  = document.body.clientWidth
        var image_width   = document.images[0].width
        var image_height  = document.images[0].height
        var height_ratio  = image_height / window_height
        var width_ratio   = image_width / window_width
        if (height_ratio > width_ratio)
        {
            document.images[0].style.width  = "auto"
            document.images[0].style.height = "100%"
        }
        else
        {
            document.images[0].style.width  = "100%"
            document.images[0].style.height = "auto"
        }
    }
    </script>

    <body onresize="resizeImage()">
    <center><img onload="resizeImage()" margin="0" border="0" src="http://upload.wikimedia.org/wikipedia/en/2/2b/1_WTC_rendering.jpg"></center>
    </body>


    </head>
    </html>​
于 2012-08-10T07:11:03.713 に答える