无涯教程网

Css 设置项目的最大宽度和最大高度

发布于12月14日

我有一张尺寸为335px X 891px的图像.

我将css设置为max-width:270px和max-height:530px 我得到的结果是…… 图像确实会缩小，并保持其纵横比.它的宽度缩小到270px.这将创建718px的高度.我希望我的图像始终保持在270和530之间.一个数字可以更小，但不能更大.

所以，在这张图片中，我希望高度为530.这将使宽度降至约200.这很好，因为这两个数字现在都在我想要的范围内.

这是另一个宽幅图像的例子.如果我的图像是1000宽600高，则需要将图像缩小到270x160

我怎么能这样做呢？

推荐答案

我在下面添加了一些示例代码.

img {
  max-width: 270px;
  max-height: 530px;
  border: 1px solid green;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<img src="https://picsum.photos/335/891" alt="Your Image" />

我认为只用max-width、max-height是解决不了这个问题的.

Css相关问答推荐

当optgroup元素不包含任何未使用CSS禁用的选项元素时，如何隐藏它

如何让CSS过渡应用时宽度增加，而不是减少？

Vue3日期 Select 器：禁用向左和向右箭头

如何以Angular 将下拉面板的宽度与其文本框对齐

向左或向右浮动时的不同图像边距

为什么 KaTeX 的彩虹文本只能在 Firefox 上运行？

React Tabs 在 Tabs 之间垂直渲染标签内容

TypeScript 中有效的 CSS 属性名称数组，但带有连字符

css ：：part 伪 Select 器 Chrome 兼容性？

在 css Select 器中匹配 unicode char

n 个元素的 CSS 关键帧动画

使用 CSS 填充悬停过渡的闪烁文本问题

如何在 CSS 中更改：：marker SVG colored颜色？

Adobe Illustrator 删除我在 svg 图像上的类名.我怎样才能防止这种情况？

元素上的子弹来自哪里？

我应该使用 CSS ：disabled 伪类还是 [disabled] 属性 Select 器，还是见仁见智？

IE划掉伪元素CSS？

CSS 否定伪类：not() 用于父/祖先元素

名称-值对的语义和 struct

模拟显示：React Native 中的内联

实用课程推荐

相关教程推荐