css - 通过将图像高度设置为容器高度,使图像适合其容器

标签 css image aspect-ratio

假设我有 container.a 并且它有一些高度(以像素为单位),假设我在 container.a 中有另一个 container.b,它是 container.a 的 80%,现在说我想要适合具有一定高度的图像pixels into container.b,如何让图像的高度为container.b的高度,然后使用CSS保持宽度纵横比?

<div class="container.a">
  <div class="container.b">
    <img class="image.a" src="my_image.png" />
  </div>
</div>

.container.a { width: 200px; height: 300px; }
.container.b { width: 80%; height: 80%; }
.image.a { ? }

最佳答案

给图片100%的宽度

 .image.a{width:100%;}

关于css - 通过将图像高度设置为容器高度,使图像适合其容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16037566/

相关文章:

c# - "Date Taken"在 Windows 资源管理器中显示在文件详细信息(文件属性)中时未显示在 Image PropertyItems 中

css - 具有设置纵横比的响应式幻灯片

Android 将 Px 转换为 Dp(视频宽高比)

html - 使用 CSS 保持 div 的纵横比

javascript - 使用切换按钮折叠/展开内容框

PHP:SELECT * FROM 的 echo 中的表出现问题

html - 边框仍然显示,为什么?

java - 无法绘制缓冲图像

php - Img src 作为 php 变量

css - rst2pdf 页眉/页脚文本颜色