Question

我很难实现上面的代码。我希望有人能指出我正确的方向。在填充整个盒子时，我无法将图像缩放到它们保持比例的位置。所以我试图用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;}

Answer 1

最简单的方法是使用图像缩放器，它们非常易于使用，如果要调整大图像的大小，还可以节省带宽，下载Thumber：

以下是您使用它的方式：

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

您也可以使用w（宽度）作为参数，或两者都使用，它永远不会拉伸图像。

如何正确实现jquery

1 个答案: