图像每次都是相同的高度和宽度答案

【问题标题】：Image is the same height and width everytime图像每次都是相同的高度和宽度
【发布时间】：2015-05-17 17:42:10
【问题描述】：

目前我创建了一个小图片上传系统。但我希望每张照片看起来都一样。例如我上传一张图片（500x500）然后我必须用css最小化图片。我有一节课

.picture{
width: 30%;
height: 30%;
}

但是每张图片的大小都会有所不同。 A 想要一个固定的高度和宽度，但不是这样：

.picture{
width: 200px;
height: 200px;
}

我想做这个页面：Link 在此页面上，每张图片都有其他尺寸，但在首页，每张图片看起来都一样。我怎么能意识到这样的事情？

这是我的代码：

*{
    margin: 0px;
    padding: 0px;
}

.button-submit{
    margin-top: 10px;
    padding: 10px 15px;
    border: 2px solid black;
    background-color: orange;
    color: black;
    transition: all 0.5s;
}

.button-submit:hover{
    color: orange;
    border: 2px solid orange;
    background-color: black;
}

.picture{
    width: 30%;
    height: 30%;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="meine.css" >
    </head>
    <body>
        <?php include "connection.php" ?>
        <h1>Lade dein Bild hoch</h1>
        
        <form action="upload.php" method="post" enctype="multipart/form-data">
            <input type="file" name="fileToUpload" id="fileToUpload">
            <br>
            <input type="submit" value="Upload Image" class="button-submit" name="submit">
        </form>
        <?php
            
            $sql = "SELECT * FROM bilder";
            $result=mysqli_query($db,$sql);
            while($row=mysqli_fetch_assoc($result)){
                echo "<img src='$row[bild_pfad]' alt='$row[bild_name]' style='$row[bild_werte]'>";
            } 
        ?>
    </body>
</html>

这里是upload.php

<?php
include "connection.php";
//Ordner in dem die Datein geladen werden
$target_dir = "uploads/";
//Der Pfad (Order + / + Dateiname)
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
//Variable ob der Upload fortfahren soll
$successful = TRUE;
//Von Pfad der Anbau (MyFile.Anbau(.jpg,.png,...)) wird in eine Variable geschrieben
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);

$meldung = "";
//Wurde der Submit Button gedrückt?
if(isset($_POST["submit"])){
    //In dem Array werden verschiedene Werte gespeichert (Breite, Höhe, Typ), bei einem Fehler (falls kein Bild) ist der Rückgabewert False
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if(!($check == false)){
        //Prüfe ob der Name bereits exestiert
        if(file_exists($target_file)){
            $meldung = "Der Bildname exestiert bereits.";
            $successful = FALSE;
        }
        //Prüfe die Größe des Bildes
        if($_FILES["fileToUpload"]["size"] > 500000){
            $meldung = $meldung . "<br>Das Bild ist zu groß.";
            $successful = FALSE;
        }
        //Prüfe Format des Bildes
        if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "JPG" && $imageFileType != "PNG" && $imageFileType != "JPEG") {
            $meldung = $meldung . "<br>Ungültiges Format.";
            $successful = FALSE;
        }
    }else{
        echo "Die Datei ist kein Bild.";
        $successful = FALSE;
    }
}

//Prüfe ob ein Fehler aufgetreten ist
if ($successful == FALSE){
    $meldung = $meldung . "<br>Die Datei wurde nicht hochgeladen.";
//Bei keinem Fehler
}else{
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        $picturename = $_FILES["fileToUpload"]["name"];
        $pictureheightwidth = $check[3];
        $picturepath = $target_file;
        
        $eintrag = "INSERT INTO bilder (bild_name, bild_werte, bild_pfad) VALUES ('$picturename', '$pictureheightwidth', '$picturepath')";
        $eintragen = mysqli_query($db, $eintrag);    
        
        $meldung = "Das Bild wurde erfolgreich hochgeladen";
    } else {
        $meldung = $meldung . "<br>Fehler beim hochladen des Bildes.";
    }
}


echo $meldung;
?> 

<a href="index.php">Zurück</a>

Link 解决了我的问题。

【问题讨论】：

您将图像的最小尺寸缩放为 200 像素，然后将较大的尺寸裁剪为 200 像素。您是否希望在 php 级别或 HTML/CSS 级别进行此操作？
我不知道。我以前从来没有做过这样的事情。也许你可以帮助我。
请张贴相关的html和css（只是重要的部分，不是全部；）理论上，百分比宽度/高度解决方案应该有效，只要上传的图像总是正方形。问题是不是所有.picture 的大小都一样？还是有些图片被拉长了？
我编辑了我的问题，现在您可以看到代码。是的，图片会被拉伸。在示例页面上，他们只拍了每张照片的一小部分。如果你按下一张图片，你可以看到完整的图片。
现在我搜索了超过 1 小时，但我发现了一些东西...link

标签： php html css

【解决方案1】：

每张图片大小不一的原因是因为你 class .picture{ width: 30%;高度：30%； }

您提到了像素百分比，因此每个图像像素的大小都不同。

【讨论】：

谢谢你的回答，但我不知道我现在要做什么^^也许你可以帮助我更多。