Question

基本上我要做的是让图像填充div，同时保持其纵横比。所以我使用jquery来识别它们是纵向还是横向，并从那里设置宽度或高度。

我的问题是代码给出了所有图像的景观类。我最终知道为什么......

谢谢！

HTML

    <div class="prop">
    <div class="propimage"><img src="{@image}" alt="{@prop_name}"></div>
    <div class="propname">{@prop_name}</div>
    <div class="propdescription">{@description}</div>
    <div class="propprice">{@price}</div>
    </div>

CSS

    .portrait img {
    width: 100%;
    }
   .landscape img {
    height: 100%;
    }
   .propimage img {
        display: block;
    }
    img {
        max-width: none;
    }
    .propimage {
        width: 100%;
        height: 300px;
        overflow: hidden;
        float: left;
    }

SCRIPT

    <script>
    $(".propimage").each(function(){
        // Uncomment the following if you need to make this dynamic
        //var refH = $(this).height();
        //var refW = $(this).width();
        //var refRatio = refW/refH;

        // Hard coded value...
        var refRatio = 240/300;

        var imgH = $(this).children("img").height();
        var imgW = $(this).children("img").width();

        if ((imgW/imgH) < refRatio){ 
            $(".propimage").addClass("portrait");
        } else {
            $(this).addClass("landscape");
        }
    })
    </script>

Answer 1

请将您的代码上传到js小提琴或粘贴链接，以便我们可以看到您的代码的工作示例。同时试试这段代码

<script>
    $(".propimage").each(function(){
        // Uncomment the following if you need to make this dynamic
        //var refH = $(this).height();
        //var refW = $(this).width();
        //var refRatio = refW/refH;

        // Hard coded value...
        var refRatio = 240/300;

        var imgH = $(this).children("img").height();
        var imgW = $(this).children("img").width();

        if (imgW=<200 || imgH<=300)){ 
            $(this).children("img").css("width","100%");
            $(this).css("width","100%");
        } else {
             $(this).children("img").css("height","100%");
             $(this).css("height","100%");
        }
    })
    </script>

根据方向调整图像大小

1 个答案: