代码之家 › 专栏 › 技术社区 › user541686

如何设置<img>最大高度:宽度;没有影响?

css html

user541686 · 技术社区 · 7 年前

以下是我试图在纯CSS中实现的目标:

我得到了一个任意的机会 div . 我知道关于它的布局除了
特别是,绝对明确地说,这意味着我不知道它的位置,填充,边距,宽度等,因此 .
我得到了一个任意尺寸的图像文件放在 (直接或间接)。
CSS应该缩小图像以确保其宽度不超过其父图像的宽度。
CSS应该将图像裁剪成一个圆形。

我的理想世界是这样的:

<!DOCTYPE html>
<head>
	<style type="text/css">
		img {
			max-width: 100%;
			max-height: width;  /* I wish this was a thing... */
			border-radius: 50%;
			object-fit: cover;
		}
	</style>
</head>
<body>
	Arbitrary content...
	<div style="width: 25%; margin-left: 10px; top: 1em;"> <!-- arbitrary -->
		<img src="https://i.stack.imgur.com/8mNMb.png"/>
	</div>
	Arbitrary content...
</body>
</html>

height: width

我试过书中的每一个技巧,但都以某种方式失败告终。下面是一个 height: 0; padding-bottom: 100%; 技巧:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<style type="text/css">
		.square {
			height: 0px;
			padding-bottom: 100%;
		}
		.circle {
			position: absolute;
			max-width: 100%;
			height: 100%;  /* not really sure what to put here */
			border-radius: 0%;
			object-fit: cover;
		}
	</style>
</head>
<body>
	Arbitrary content...
	<div style="width: 25%; margin-left: 50px; top: 1em;">
		<div class="square">
			<img class="circle" src="https://i.stack.imgur.com/8mNMb.png"/>
		</div>
	</div>
	Arbitrary content...
</body>
</html>

我如何做到这一点?

0 回复 | 直到 7 年前

JasonB 7 年前

你的第二个片段很接近。你需要 position:relative; 在方形容器上,以便可以将圆的高度和宽度设置为该方形容器的100%。使用 object-fit: scale-down;

.circle {
  height: 0px;
  padding-bottom: 100%;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

.circle img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

Arbitrary content...
<div style="width: 25%; margin-left: 50px; top: 1em;">
  <div class="circle">
    <img src="https://i.stack.imgur.com/8mNMb.png" />
  </div>
</div>
Arbitrary content...
<div style="width: 250px;">
  <div class="circle">
    <img src="https://picsum.photos/68/50" />
  </div>
</div>
Arbitrary content...
<div style="width: 250px;">
  <div class="circle">
    <img src="https://picsum.photos/200/300" />
  </div>
</div>
Arbitrary content...
<div style="width: 250px;">
  <div class="circle">
    <img src="https://picsum.photos/300/200" />
  </div>
</div>
Arbitrary content...
<div style="width: 250px;">
  <div class="circle">
    <img src="https://picsum.photos/400/400" />
  </div>
</div>

connexo 7 年前

你可以利用这样一个事实,即基于百分比的填充总是指 width 父元素的,即使应用于 padding-top 和/或 padding-bottom height: 0; 和 padding: 50% 0; 得到一个正方形 div 任何时候。

示例:

div div {
  background: #ccc;
  border-radius: 50%;
  height: 0;
  padding: 50% 0;
}

.a {
  width: 20px;
}

.b {
  width: 80px;
}

<div class="a">
  <div></div>
</div>

<div class="b">
  <div></div>
</div>

background-image div div .