-1

上記のコードを実装するのに苦労しています。誰かが私を正しい方向に向けてくれることを望んでいました。ボックス全体を塗りつぶしながら比率を維持する場所に画像を拡大縮小することはできません。だから私は次元を拾うためにjavascriptを使用しようとしています。私の問題は、私がJavaを初めて使用することであり、どういうわけか間違って実装していると思います。誰かが私が間違っていることを教えてください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="_jquery/jquery-1.10.2.min.js"></script>

</head>

<body>
<div class="gallery_item">
  <article class="piece">
    <div class="piece-image">
     <figure> <img src="_img/prod/22.jpg" alt="asdf"> </figure>
      </div>
      <section class="piece-title">
        <div  class="piece-title-text">
          <h6>Title of piece</h6>
          <h5>by Artists Name</h5>
          <p><img src="_img/magnifyingGlass.png" width="283" height="417" alt="enlarge"></p>
        <p>ENLARGE</p>
        <h3>$600 - $1200</h3>
        <p>View details of this print</p>
      </div>
    </section>
  </article>
</div>

<script>$(".piece_image img").each(function(){
var thisWidth = $(this).width();
var thisHeight = $(this).height();

if(thisWidth > thisHeight) {
$(this).css("width", "auto");
$(this).css("height", "100%");
} else if(thisHeight > thisWidth) {
$(this).css("width", "100%");
$(this).css("height", "auto");
}

}); </script>


---css---
.piece-image {
width: 100%;
float: left;
position:relative;
display: block;
height: 200px;}

.piece-image figure {
display: block;
position: relative;
text-align: center;
vertical-align:middle;
margin: 0 auto;
height: 200px;
overflow: hidden;
top: 0;
z-index: 1;}

.piece-image figure img {
vertical-align:middle;
position:absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index:1;}
4

1 に答える 1

0

これを行う最も簡単な方法は、画像リサイズを使用することです。これらは非常に使いやすく、大きな画像のサイズを変更する場合は帯域幅も節約できます。Thumberをダウンロードしてください。

使用方法は次のとおりです。

http://yourserver.org/thumber.php?img=images/abc.png&h=200

w (幅) をパラメーターとして使用することも、その両方を使用することもできます。画像が引き伸ばされることはありません。

于 2013-09-11T09:27:02.843 に答える