Question

我的图片及其容器div元素存在问题。我的图像小于容器div，当我尝试适合它们时，图像在下部切割。我该如何解决这个问题？

我浏览网页并找到了很多解决方案，但我无法将它们应用到我的工作中。你能救我吗？

这是我的代码：

的CSS：

#box_foto_1{
    clear: both;
    float: left;
    width: 400px;
    height: 262px;
    border: 1px solid;
    margin-left: 100px;
    margin-top: 20px;
    overflow: hidden;
}


#box_foto_1 img{
    height: auto;
    width: 100%;
}

这里是html / php：

$html .= "<div id='box_foto_1'>";
$html .= "<img src='$row[foto1]' >";
$html .= "</div> <!-- fine box_foto_1 -->";

html / php代码是创建页面的php函数的一部分。

Answer 1

我是从手机上回复所以我不能给你特定的代码但是，如果我的问题很紧，最好的方法是通过php处理你的图像大小。

你可以这样做：

1）从你的css中删除＃box_foto_1 img

2）在PHP中添加一些if / else

    $html .= '<div ....';
    $div_height = 256;
    $div_width = 500;

    // now get your image dimensions and check whitch one is bigger

    ......

list($img_w, $img_h) = getimagesize($your_image);


    if($img_h>$img_w) {
         $html .= '<img src="' . $your_image . ' style="height: ' . $div_height .'px; width="auto" />';

    } else {
     $html .= '<img src="image.jpg" style="width: ' . $div_width .'px; height="auto" />';
    }

    $html .= '</div>';

搜索如何使用php获取图像尺寸...现在无法帮助您...因为我正在通过电话。

您可以在此处找到如何获取图片尺寸：

http://php.net/manual/ro/function.getimagesize.php

更新：我添加了getimagesize功能。

Answer 2

如果您希望图像适合框并显示整个图像：

您需要做的就是删除#box_foto_1身高height:262px值，或将其设置为min-height或max-height，以适合您的身份。

如果您希望图片包含在固定大小的框中：

删除CSS中max- / min-值（在我现在删除的上一个答案中）的大小，然后将宽度和高度设置为auto值#box_foto_1 img。如此：

   #box_foto_1 {
        /* added or changed rules */
        display:block;
    }
    #box_foto_1{
        clear: both; /* Clear before float is probably useless */
        float: left;
        width: 400px;
        height: 262px;
        border: 1px solid;
        margin-left: 100px;
        margin-top: 20px;
        overflow: hidden;
    }

    #box_foto_1 img{
        height: 100%;
        width: 100%;
    }

将两个值设置为100％将拉伸图像，您需要将其设置为自动，例如height:auto;，这将导致宽度溢出。

https://jsfiddle.net/bvkurufq/3/

解决这个问题的最佳方法是将图像值设置为CSS背景图像，然后您可以自由地对其进行更多的CSS操作。您可以通过使用填充了数据库SRC引用的style顶部的<body>部分内嵌定义图像来实现此目的。

实施例： PHP / HTML输出：

<?php
/*within the PHP image loop */
{
<style>
    #imageUniqueId {
    background-image:url('<?php print $imageURL;?>');
    }
</style>
<div id='box_foto_1'>
<div id='imageUniqueId' class='imageClass'></div>
</div> <!-- fine box_foto_1 -->

<?php 
}
?>

CSS：

#box_foto_1{
    min-width: 400px;
    min-height: 262px;
    float: left;
    border: 1px solid;
    margin-left: 100px;
    margin-top: 20px;
    overflow: hidden;
}

.imageClass { 显示：块; 最小宽度：400px; 最小高度：262px; background-repeat：no-repeat; 背景位置：中心; background-size：包含; }

请参阅https://jsfiddle.net/bvkurufq/33/

Answer 3

我刚刚在Martin提供的fiddle中试过这个，所以你可以尝试这样的东西来包含div中的图像，而不会裁剪或扭曲比例：

只需将其添加到您的图片类：

#box_foto_1 img{
        max-width: 100%;
        object-fit: contain;
        height: 100%;
        }

如果您想要使图像与div的大小完全匹配，那么您需要为图像指定与块相同的尺寸，但这会使比例失真。

或将object-fit:contain替换为object-fit:fill。

在div内部放置图像而不切割它

3 个答案: