css 我如何在php中调整或编辑一个echo图像?

2uluyalo  于 2023-01-06  发布在  PHP
关注(0)|答案(1)|浏览(100)

我是一个相当初级的php。这是我的第一个个人项目,只是为了练习。它应该是一个非常简单的电子商店。我想做一个目录的几个产品,所以我创建了数组与一些值。我想添加一个图片到每个产品,这工作完美。只要我使用HTML表情符号。但我想有真实的的图片在那里。不知何故,我想出了办法,但我有我的CSS在一个单独的文件和风格编辑适用于HTML表情符号,但没有根本不适用于jpg图片。
有人能帮我解决这个问题吗?我想样式的图像仍然在CSS文件中。我使用的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>";

        }

?>


and this is what I got in my CSS file: 


.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;

}
watbbzwu

watbbzwu1#

我的回答主要是关于修复代码
现在只需要创建一个名为product-image的类,然后就可以将css应用到该类。.product-image img {// your values here}

$tv = ['id' => 1, 'name' => 'TV', 'image' => 'tv.jpg', 'price'=> 1000]; 
    $computer = ['id' => 2, 'name' => 'Computer', 'image' => 'computer.jpg', 'price'=> 2000];

    $catalog = [$tv, $computer];

    $data = '';
    foreach($catalog as $item)
    {
        $data .= '<div class="catalog-item">';
        $data .= '<img class="product-image" src="/img/' . $item['image'] . '" alt="' . $item['name'] . '">';
        $data .= '<div class="product-name">' . $item['name'] . '</div>';
        $data .= '<div class="product-price">' . $item['price'] . '</div>';
        $data .= '<button class="add-to-cart" data-id="' . $item['id'] . '">Buy</button>';
        $data .= '</div>';
    }

    echo $data;

相关问题