问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

我想在不改变纵横比的情况下以固定大小（100 像素 x 100 像素）的 div 显示任意大小（不同宽度和高度）的图像。我还想将图像对齐到 div 内的中心。我对它进行了处理，但除非我更改其宽高比，否则具有不同宽度和高度（第 6 个）的图像不会居中。

 <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>

下面附上图片：

在此处输入图像描述

原文由 Learner AKS 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcss图片size
阅读 360
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

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

原文由 nipunasudha 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

使用 max-width 和 max-height 到 CSS 中的 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">

另一种选择：

如果你想添加 parent 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>

原文由 Adeel 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题