Image is the same height and width everytime

Question

At the moment i create a little picture upload system. But i want that every picture looks same. As example i upload a picture (500x500) then i have to minimize the picture with css. I have one class

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

But every picture vary in the size then. A want a fixed height and width but not like this:

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

I want to do it like this page: Link On this page every picture got an other size but at the fronpage every picture look same. How can i realize something like that?

Here my Code:

*{
    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>

Here the 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>

This Link solved my problem.

You would scale your image's smallest dimension to be 200px and then crop the larger dimension to be 200px. Are you looking to do this manipulation at the php level or the HTML/CSS level? — BigScar, Mar 15 '15 at 16:06
I dont know. I never made something like this befor. Maybe you can help me. — Skeptar, Mar 15 '15 at 17:41
Please post the relevant bit of html and css (just the important part, not everything;) In theory, the percentage width/height solution should work, as long as the uploaded images are always squares. Is the problem that not all `.picture` end up the same size? Or are some of the pictures getting stretched? — henry, Mar 15 '15 at 17:44
I edited my Question now you can see the code. And Yes the picture would be streched. On the example page, they only took a bit of every picture. And if you press on one image you can see the full image. — Skeptar, Mar 15 '15 at 17:55
Now i searched over 1h but i found something... [link](http://stackoverflow.com/questions/18673900/how-to-center-and-crop-an-image-to-square-with-css) — Skeptar, Mar 15 '15 at 18:24

score 0 · Answer 1 · answered Mar 15 '15 at 16:14

0

The reason why every picture vary in the size is because of you class .picture{ width: 30%; height: 30%; }

You have mentioned percentage of pixels so size image varires as every image pixels varies .

answered Mar 15 '15 at 16:14

Techews.com

1
2

Thanks for the answer, but i dont know what i have to do now ^^ Maybe you can help me a bit more. – Skeptar Mar 15 '15 at 17:41

Image is the same height and width everytime

1 Answers1