首页 > 解决方案 > 根据图像大小自动设置图像高度和宽度

问题描述

所以我经常将 Photoshop 中的图像导出为 PNG 和网页。我总是必须手动输入width: 100 height 100并向上直到完全达到图像的大小。

如何根据图像的大小自动设置图像的高度和宽度。

HTML

<div class="content">
    <div class="client">
        <div class="page">
            <div class="page_bg">
                <div class="welcome-card">
                    <div class="card">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.welcome-card{
    background-image:url("../images/welcome-card.png");
    height:400px;
    width:360px;
    border:1px solid red;
}

看起来像这样https://i.gyazo.com/74c78f9cb79c195701d24ffb77abeec7.png

我不断调整widthandheight直到我完全显示图像。有没有更快的方法来做到这一点?

标签: htmlcss

解决方案


只需使用img标签而不是将图像用作div元素中的背景图像


推荐阅读