重新调整图像大小在不同的图像上是不同的 - Re-sizing image differs on various images?

Re-sizing image differs on various images?

我在显示与矩形大小相同的图像时遇到了问题。我有下面的代码显示默认图像(如果文件没有上传)作为一个漂亮的矩形，看起来不错，但是如果我上传的图像是纵向或横向的，它完全打乱了图像的大小，网站到处都是商店?以下是原始代码:

<?php

$sql = "SELECT * FROM pages ORDER BY RAND() LIMIT 3";
$result = mysqli_query($mysqli,$sql)or die(mysqli_error());
while($row = mysqli_fetch_array($result)) {
    $page_name = $row['page_name'];
    $page_dp = $row['page_dp'];

?>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="pageimg/<? echo $page_dp; ?>" alt="Page Image">
      <div class="caption">
        <h3><? echo $page_name; ?></h3>
        <div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%">10%
    <span class="sr-only">10% Complete (success)</span>
  </div>
</div>
        <p><b>£100.00</b> Target | <b>£10.00</b> Raised</p>
        Here is a little info about this current topic, please help us raise more than we can! We need your help!
        <p><a href="#" class="btn btn-success" role="button">Donate Now</a> <a href="#" class="btn btn-default" role="button">Details</a></p>
      </div>
    </div>
  </div>

<?
} 

mysqli_close($mysqli);
?>

我试过了:

<img src="pageimg/<? echo $page_dp; ?>" alt="Page Image" width="618" height="413">

并尝试添加高度和宽度样式的CSS代码，但似乎没有工作?什么好主意吗?下面是一个网页的例子来说明我的意思…

http://fundfeeder.co.uk/pages.php

顶部部分是我试图编辑的地方，但底部部分是它应该如何完美地排列?

Replace:

<img src="pageimg/<? echo $page_dp; ?>" alt="Page Image">

<img src="pageimg/<? echo $page_dp; ?>" class="pageImage" alt="Page Image">

并将以下内容添加到您的CSS文件中:

.pageImage {
    width: 348px;
    height: 233px;
}

或者如果你喜欢内联:

<img src="pageimg/<? echo $page_dp; ?>" style="width:348px;height:233px;" alt="Page Image">