PHP求助：如何调整echo输出图片大小？CSS样式无法生效问题

我是PHP初学者，这是我的第一个个人练习项目——一个简易电商网站。我想了解如何在PHP中调整或编辑echo输出的图片大小，同时遇到了一个问题：创建产品数组制作商品目录时，使用HTML表情符号作为产品图标时CSS样式能正常生效，但换成JPG图片后，外部CSS文件的样式完全无法应用到这些图片上。希望能在CSS文件中对图片进行样式设置，我的代码如下：

我的CSS代码 #

.catalog-item {
width: 200px;
height: 300px;
background: rgb(65, 177, 214);
margin: 5px;
font-size: 15px;
font-family: Arial;
box-sizing: border-box;
text-align: center;

}

body {
display: flex;
}

.catalog-img {
display: block;
width: 200px;
height: 150px;
font-size: 100px;
font-family: Arial;
box-sizing: border-box;

}

我的PHP代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eshop</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>


<?php

$TV = ["id" => "1", "name" => "TV", "img" => "<img src='img/TV.jpg'>", "price" => "1000 USD"];
$Computer = ["id" => "1", "name" => "Computer", "img" => "<img src='img/computer.jpg'>", "price" => "2000 USD"];
$Laptop = ["id" => "1", "name" => "Laptop", "img" => "<img src='img/laptop.jpg'>", "price" => "750 USD"];
$Camera = ["id" => "1", "name" => "Camera", "img" => "&#128247", "price" => "500 USD"];
$Phone = ["id" => "1", "name" => "Phone", "img" => "&#128241", "price" => "400 USD"];
$Smartwatch = ["id" => "1", "name" => "Smartwatch", "img" => "&#8986", "price" => "300 USD"];

  

$catalog = array ($TV, $Computer, $Laptop, $Camera, $Phone, $Smartwatch);
foreach ($catalog as $item){
    echo 
    "<div class='catalog-item'>
        <div class='catalog-img'>
        ".$item ["img"]."
        </div>
        <div>
        ".$item ["name"]."
        </div>
        <div>
        ".$item ["price"]."
        </div>
        <div>
        Buy
        </div>
    </div>";
    
    // print_r($item);
    // echo "<br>";
}
?>
</body>
</html>

问题根源 #

你给.catalog-img容器设置的样式只作用于容器本身，<img>标签是独立的块级元素，不会自动继承容器的宽高；而表情符号属于文本内容，会继承容器的字体大小等样式，所以能正常适配。

具体修复步骤 #

1. 优化产品数组的img字段
   不要直接存储<img>标签，只保留图片路径，这样可以统一给生成的img标签添加类名，方便CSS控制：

   $TV = ["id" => "1", "name" => "TV", "img" => "img/TV.jpg", "price" => "1000 USD"];
   $Computer = ["id" => "1", "name" => "Computer", "img" => "img/computer.jpg", "price" => "2000 USD"];
   $Laptop = ["id" => "1", "name" => "Laptop", "img" => "img/laptop.jpg", "price" => "750 USD"];
   // 表情符号项保持不变
   $Camera = ["id" => "1", "name" => "Camera", "img" => "&#128247", "price" => "500 USD"];
   $Phone = ["id" => "1", "name" => "Phone", "img" => "&#128241", "price" => "400 USD"];
   $Smartwatch = ["id" => "1", "name" => "Smartwatch", "img" => "&#8986", "price" => "300 USD"];
   

2. 修改echo输出的HTML结构
   通过判断内容类型，分别生成图片标签或直接输出表情符号：

   foreach ($catalog as $item){
       // 处理图片或表情内容
       $content = '';
       if (strpos($item["img"], '.jpg') !== false) {
           $content = "<img src='{$item["img"]}' class='catalog-img-item'>";
       } else {
           $content = $item["img"];
       }
       
       echo 
       "<div class='catalog-item'>
           <div class='catalog-img'>
           {$content}
           </div>
           <div>{$item["name"]}</div>
           <div>{$item["price"]}</div>
           <div>Buy</div>
       </div>";
   }
   

3. 更新CSS样式
   给图片单独设置样式，同时优化容器布局适配表情符号：

   .catalog-item {
       width: 200px;
       height: 300px;
       background: rgb(65, 177, 214);
       margin: 5px;
       font-size: 15px;
       font-family: Arial;
       box-sizing: border-box;
       text-align: center;
   }
   
   body {
       display: flex;
       flex-wrap: wrap; /* 新增：让商品在小屏幕自动换行 */
   }
   
   .catalog-img {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 200px;
       height: 150px;
       font-size: 100px;
       font-family: Arial;
       box-sizing: border-box;
   }
   
   /* 新增图片专属样式 */
   .catalog-img-item {
       width: 100%;
       height: 100%;
       object-fit: cover; /* 保持图片比例，填满容器且不变形 */
   }
   

PHP层面调整图片大小的方法 #

如果需要在服务器端生成缩略图（节省带宽），可以用GD库实现（需确保服务器安装了GD扩展）：

// 调整图片大小的函数
function resizeImage($sourcePath, $targetPath, $newWidth, $newHeight) {
    list($width, $height) = getimagesize($sourcePath);
    $newImage = imagecreatetruecolor($newWidth, $newHeight);
    $sourceImage = imagecreatefromjpeg($sourcePath);
    imagecopyresampled($newImage, $sourceImage, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
    imagejpeg($newImage, $targetPath);
    imagedestroy($newImage);
    imagedestroy($sourceImage);
}

// 使用示例：生成200x150的缩略图
resizeImage('img/TV.jpg', 'img/resized_TV.jpg', 200, 150);

内容的提问来源于stack exchange，提问作者Sisa