logo标签列表

如何在固定大小为100x100的div中显示任意大小的图像？

htmlcssimagesize
8

我希望在一个固定尺寸（100px x 100px）的div中展示任意大小（不同宽度和高度）的图片，同时保持其原始比例。我还希望将图片居中对齐到div中心。我已经尝试了一些方法，但是不同宽度和高度的图片（第六幅）如果不改变其长宽比就无法居中对齐。

<html>        
    <style>
        .A{
            border:1px dotted black;
            display:inline-block;
        }

       .B{
            border:1px solid black;
            display:inline-block;
            width: 100px;
            height:100px;
            overflow:hidden;
        }

        .C{
            border:1px solid black;
            display:inline-block;
            width: 100px;
            height:100px;
            overflow:hidden;
        }
    </style>

    1
    <div class="A"> 
        <img src="man-profile.png">
    </div>

    2
    <div class="B">
        <img src="man-profile.png">
    </div>

    3
    <div class="B">
        <img src="man-profile.png" style="width:100;">
    </div>

    4
    <div class="C">
        <img src="picture.png" style="width:100;">
    </div>

    5
    <div class="C">
        <img src="picture.png" style="height:100;">
    </div>

    6
    <div class="C">
        <img src="picture.png" style="height:100; width:100%">
    </div>
</html>

以下是您需要翻译的内容：

下面附上图片：

在此输入图片描述

img {max-width:100%} - UncaughtTypeError
通过这样的方式，我得到了快照中（4）那样的图像。请查看图片。 - Learner AKS
那么，这将“在固定大小（100px x 100px）的div中显示任何尺寸（不同宽度和高度）的图像而不改变其纵横比”。请澄清您的问题，因为您想要的结果不清楚。您可以将现有代码添加到代码片段中，以便我们更容易地将其克隆到答案中，还可以在此处生成占位符图像以进行演示：https://placeholder.com/，这样就不需要对图像大小和纵横比进行任何假设，这将比问题的屏幕截图更有用。 - UncaughtTypeError
3个回答
12
使用CSS中的max-width和max-height属性来设置img标签的最大宽度和最大高度。 

img {
    display: block;
    max-width:180px;
    max-height:180px;
    width: auto;
    height: auto;
}
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

这张图片的原始尺寸是400x400像素，但你可以通过CSS调整大小而不改变宽高比。 <img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

另一种选项：

如果你想要将父级div添加到图片中，可以像这样操作：

.container {
    width: 100px;
}

.container img {
    display: block;
    width: 100%;
    height: auto;
}
<div class="container">
    <img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
</div>

3

使用背景图像代替。当您需要一张图片覆盖整个div，而不改变宽高比时，这是最简单的方法。

element {
    background-repeat:no-repeat;
    background-position: center;
    background-image:url(image.jpg);
    background-size: cover;
}
2

在等比例缩放的情况下，使用相同的宽度和高度（即100x100）。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接