Question

所以我经常将图片从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

我一直在调整width和height，直到我完全展示图像。有更快的方法吗？

Answer 1

只需使用img代码，而不是将图片用作div元素中的背景图片

Answer 2

使用：

.welcome-card{
  background-image:url("../images/welcome-card.png");
  background-size: cover;
  background-position: center;
}

请注意，您仍然需要将.welcome-card元素的高度和宽度设置为您想要的最终大小。

为了更清楚地知道为什么这很重要，我做了这个代码：https://codepen.io/anon/pen/aGmMJz

请注意，原始图像为768x1024px。使用响应式布局，只需使用封面和背景位置：中心，即可轻松调整每个单元格的宽度和高度，而无需关心背景图像的底层尺寸。

当您更改浏览器宽度时，请注意所有内容的移动情况，无需额外的工作。您的大多数样式都是最小的尺寸，您只需在宽度扩展时调整某些属性。

Answer 3

尝试使用此

对象：封面;

根据图像大小自动设置图像高度和宽度

3 个答案: