div 背景小于其内容与 css (不指定宽度 % 或 px) [英] div background smaller than its content with css (without specifying the width in % or px)

问题描述

这就是我所拥有的:

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Plain-M%26Ms-Pile.jpg/280px-Plain-M%26Ms-Pile.jpg" 高度="170" width="170" style="border-radius:700px; border: 10px solid white;">

这就是我想要的:

我在 CSS 中尝试过边框、插入阴影和许多其他选项，但似乎没有一个适合我的目的.

有没有什么办法可以让div的背景比内容小而不必指定其高度?

解决方案

我知道这是旧的，但你可以使用背景大小和位置(如果需要).

背景尺寸:50% 50%；/* 背景为 div 大小的一半 */背景位置:50% 50%；/* 居中 */

This is what I have:

<div style="width: 100%; background: red; text-align: center">
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Plain-M%26Ms-Pile.jpg/280px-Plain-M%26Ms-Pile.jpg" height="170" width="170" style="border-radius:700px; border: 10px solid white;">
</div>

This is what I want:

I've tried borders, inset shadow, and many other options in CSS but none of them seem to work for my purpose.

Is there any way to make the div's background smaller than the contents WITHOUT having to specify its height?

解决方案

I know this is old, but you can use background-size and position(if needed).

background-size: 50% 50%; /* background half the size of the div */
background-position: 50% 50%; /* to center it */

这篇关于div 背景小于其内容与 css (不指定宽度 % 或 px)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！