Question

目前我创建了一个小上传页面。在页面上，您可以上传图像。这是链接：MyPage。现在我想裁剪图像，但我希望看到更多的图像，而不仅仅是像现在一样的小块。这个页面是一个很好的例子：Page。另一个负面因素是质量，我认为质量更差。

以下是示例页面上的两张图片：picture如果您使用相同的图片查看真实版本的正方形，它在我的页面上看起来会更好。这是另一张图片：picture。我希望你能理解我。

这是我的代码：

＆＃13;

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

＆＃13;

<!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 class='image' src='$row[bild_pfad]' alt='$row[bild_name]' style='$row[bild_werte]'>";
            } 
        ?>
    </body>
</html>

＆＃13;

Answer 1

您想要的效果是缩放图像以覆盖其尺寸。您可以通过更改图片的object-fit属性轻松调整CSS来实现此目的。像这样：

.image { object-fit: cover; }

CSS裁剪具有相同质量的图像

1 个答案: