LeCMS
ClassCMS
Fastadmin
iCMS
PbootCMS
PHPCMS
易优CMS
YzmCMS
讯睿CMS
极致CMS
Wordpress
HkCMS
YznCMS
WellCMS
ThinkCMF
帝国CMS
SIYUCMS在CSS中，有多种方法可以设置图片的宽高比（aspect ratio），具体取决于你的需求和上下文。以下是几种常见的方法：
方法一：使用 object-fit 和 width / height
设置容器尺寸：首先为图片的容器设置一个固定的宽度和高度，或者只设置一个维度，另一个使用百分比或自动（
auto）。使用
object-fit：在图片上应用object-fit属性，以控制图片如何适应其容器。
html复制代码<div class="image-container"><img src="your-image.jpg" alt="Example Image"></div>
css复制代码.image-container {width: 300px; /* 固定宽度 */height: 200px; /* 固定高度 */overflow: hidden; /* 隐藏溢出的部分 */}.image-container img {width: 100%;height: 100%;object-fit: cover; /* 使图片保持其宽高比，并填充容器 */}object-fit 的可选值包括：
fill：默认，拉伸图片以完全填充容器（可能会变形）。contain：保持图片的宽高比，将图片缩放至容器内，但可能会有空白区域。cover：保持图片的宽高比，将图片缩放至覆盖整个容器，但可能会裁剪图片。scale-down：保持图片的宽高比，将图片缩放至其原始尺寸或contain的尺寸，取较小者。none：保持图片的原始宽高比和尺寸，不缩放。
方法二：使用 padding-top 技巧
这种方法通过容器的 padding-top 属性来维护宽高比，适用于不需要固定尺寸的情况。
html复制代码<div class="aspect-ratio-box"><img src="your-image.jpg" alt="Example Image"></div>
css复制代码.aspect-ratio-box {position: relative;width: 100%; /* 或者你需要的任何宽度 */padding-top: 56.25%; /* 16:9 的宽高比，计算为 9/16 = 0.5625，然后转换为百分比 */}.aspect-ratio-box img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover; /* 或其他合适的值 */}方法三：使用 CSS Grid 布局
CSS Grid 可以非常方便地设置宽高比。
html复制代码<div class="grid-container"><img src="your-image.jpg" alt="Example Image"></div>
css复制代码<td class="hljs-ln-line hljs-ln-numbers" data-line-number="9" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; scrollbar-width: none; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px;<tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; scrollbar-width:.grid-container {display: grid;width: 100%; /* 或者你需要的任何宽度 */height: auto; /* 或者你需要的任何高度 */grid-template-rows: 1fr; /* 1行 */grid-template-columns: 16fr 9fr; /* 16:9 的宽高比 */}</ 希望以上内容对你有所帮助！如果还有其他问题，请随时提问。 各类知识收集 拥有多年CMS企业建站经验，对 iCMS， LeCMS， ClassCMS， Fastadmin， PbootCMS， PHPCMS， 易优CMS， YzmCMS， 讯睿CMS， 极致CMS， Wordpress， HkCMS， YznCMS， WellCMS， ThinkCMF， 等各类cms的相互转化，程序开发，网站制作，bug修复，程序杀毒，插件定制都可以提供最佳解决方案。
未经允许不得转载：Str Tom工作室 » css中，设置图片宽高比，如何设置？
