php - 调整图像大小在不同图像上有所不同？

Question

我在显示与矩形大小相同的图像时遇到问题。我有下面的代码，它将默认图像(如果未上传文件)显示为一个漂亮的矩形，看起来不错，但是如果我上传纵向或横向图像，它会完全弄乱图像大小，并且网站遍布整个网站店铺？这是原始代码:

<?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

顶部部分是我要编辑的位置，但底部部分是它应该如何完美排列？

Answer 1

替换:

<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">