I am currently working on an upload page where users can upload images. Here is the link to the page: MyPage. However, I would like to implement image cropping functionality that displays more of the image rather than just a small portion as it does now. A great example of what I'm aiming for can be seen on this page: Page. Another issue I have noticed is the image quality, which I believe could be improved.
Let's compare two pictures from the example page: picture. If you examine the square area next to the actual version of the same image, it looks much better compared to what is displayed on my page. And here is another image from the example: picture. I hope this clarifies my point.
Below is the code snippet I am using:
*{
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;
}
.image{
object-fit: none; /* Do not scale the image */
object-position: center; /* Center the image within the element */
height: 128px;
width: 128px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="meine.css" >
</head>
<body>
<?php include "connection.php" ?>
<h1>Upload Your Image</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 class='image' src='$row[bild_pfad]' alt='$row[bild_name]' style='$row[bild_werte]'>";
}
?>
</body>
</html>