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

缩放图像以适应屏幕而不更改其纵横比

scale flexbox sass css html

now_world · 技术社区 · 5 年前

height 应该是 100% (和 width: auto; ). 但如果图像比它的高宽 width 应该是 100% (和 height: auto; ).

我能用CSS做这个吗?

如果 高度 宽度 两者都是而不是像这样挤在一起:

如果和 宽度 auto

0 回复 | 直到 5 年前

evan-leigh 5 年前

你可以用 object-fit: cover ,这样可以确保图像不会丢失其纵横比。也可以使用百分比值,如 width: 70% height: auto 因此图像在调整大小时会缩小

推荐文章

JWWalker · CSS的resize属性可以用来调整flex列宽吗?

1 年前

Sidaqpreet Singh · 为什么当设置为包裹时,柔性包裹会导致横轴出现间隙?

1 年前

rifx · 在kendoTreeViewNodeTemplate(Angular)中设置数据项的样式

1 年前

Fox L · 每行4个项目,但如果少于4个项目则留空?

1 年前

Zack Riquelme · 如何使用CSS将HTML的<header>中的<a>和<nav>内容在同一个父框中左右拆分?

1 年前

JobHunter69 · 为什么这个组件不填充整个宽度?

1 年前

Vasantha Kalyani · Flexbox Html CSS设置位置问题[重复]

1 年前

coder · 边界半径不适用于容器元素

1 年前

user9026 · 项目登录页面(freecodecamp)定价设计

1 年前

Bo Thompson · 根据需要调整柔性物品的高度,但不得超过容器

1 年前