在我的职业生涯中，我基本上不使用 html\css，但现在我有一项任务需要使用 markdown。
我有一个不应超过 80 个字符宽度的文本。这是一个 CSS:
.content {
width: 80ch;
margin-left:auto;
margin-right:auto;
}
我想嵌入这样的图片:
<img src="https://ucarecdn.com/4922ea06-6240-4be5-bd43-06021daa81d4/accountcredentials.png">
如果我简单地在同一个 div 图像中应用它会超出边界(它有更大的宽度)
如何将图像放在文本 block 的宽度内？
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="centered">
<p class="content">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p class="img">
<img src="https://ucarecdn.com/4922ea06-6240-4be5-bd43-06021daa81d4/accountcredentials.png">
</p>
</div>
.centered {
}
.content {
width: 80ch;
margin-left:auto;
margin-right:auto;
}
最佳答案
你是那个意思吗？
.content {
width: 80ch;
margin: 0 auto;
}
img {
width: 100%;
}<div class="centered">
<p class="content">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<img src="https://ucarecdn.com/1d0fc207-9d61-4bf3-8e74-a273f1b4ce91/accountcredentials.png">
</p>
</div>p 标签内的图像和 width: 100%
关于html - 如何将嵌入的图像放在文本 block 的宽度内，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53189265/