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

重新调整图像大小因各种图像而异？

1 个答案: