Question

div height:45px和width:60px div，div没有其他 css 。此Class Util.Data.EmojiType Extends %Persistent { Property CodePoint As %Integer; Property UnicodeChar As %String [ Calculated, ReadOnly, SqlComputeCode = { set {*} = $wchar({CodePoint})}, SqlComputed, Transient ]; // snip Method UnicodeCharGet() As %String { quit $wchar(..CodePoint) }用于显示客户上传的图片。我想给出图像的尺寸，以便上传的图像完全适合给定的div。我需要给出优化的大小，以便图像在div中看起来很好。第一个逻辑我试图给图像提供45乘60，90乘120等。解决这个问题的正确方法是什么。请指导。谢谢。

Answer 1

div {
  width: 60px;
  height: 45px;
  overflow: hidden;
  border: 1px solid black;
}

div img {
    width: 100%;
    min-height: 100%;
}

<div>
<img src="https://i.stack.imgur.com/aFYTl.jpg?s=328&g=1"/>
</div>

Answer 2

最好的事情如下：

"grunt-contrib-imagemin": "^1.0.0"

这将使图像尽可能最佳。如果您需要完全覆盖包含div，则可以执行以下操作：

#div-to-contain-image img {
    display: block;
    height: auto;
    min-width: 100%;
    width: 100%;
}

Answer 3

我有多种解决方案供您进行图像缩略图设置。也许它会对你有所帮助。

解决方案＃1： div中的图像垂直和水平居中

.thumb-container {
        position: relative;
        width: 60px;
        padding-bottom:45px; /* padding is using for the height of image */
        margin: 0px;
        overflow: hidden;
        border: 1px solid black;
    }
    .thumb-img {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 0px;
        padding: 0px;
        overflow: hidden;
        border: 0px;
    }
    .thumb-img img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: auto;
        max-width: 100%;
    }

<强> HTML

<div class="thumb-container">
                                                            <div class="thumb-img"><img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97900&w=80&h=50"></div>
                                                        </div>

查看Jsfiddle https://jsfiddle.net/5az8u7bj/

解决方案＃2： div中的图像垂直和水平居中width:100%完全覆盖图像框没有空格

.thumb-container {
           position: relative;
           padding-bottom:45px;
           margin: 0px;
           overflow: hidden;
           border: 1px solid black;
           width:60px;
        }
        .thumb-img {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 0px;
            padding: 0px;
            overflow: hidden;
            border: 0px;
        }
        .thumb-img img {
            position: absolute;
            top: 0;
            bottom: 0;
            left: -100%;
            right: -100%;
            height:100%;
            margin: auto;
            width: auto;
        }

<强> HTML

<div class="thumb-container">
                                                            <div class="thumb-img"><img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97900&w=500&h=200"></div>
                                                        </div>

查看JSfiddle https://jsfiddle.net/2d6x3fn6/1/

也许这些解决方案对您有所帮助

图像大小适合固定大小的div

3 个答案: