responsive-images 相关问题

我有一个网格和子网格。这些行包含重复的 [ 包含 []] 对，后跟 []。我想要每个图像容器的高度（class =“frame”... 我有一个网格和子网格。这些行包含重复的 [<div> containing [<img>]] followed by [<p>] 对。我希望每个图像容器（class =“frame”）的高度与其兄弟姐妹<p>高度相匹配，即 img 容器高度 = 同级 p 高度（p 不换行时行高 x1，p 换行时 x2 或更高）。我尝试了div.frame height=100%，但由于某种原因它没有调整图像的大小。我还尝试了另一个线程中发现的技巧：设置 height=0 和 min-height=100%，但这似乎会导致与内容宽度不匹配的列溢出问题。我可以设置一个具体的高度，如 0 或 80px，但如果文本发生变化，它不会缩放。我希望一些框架高度设置可以解决这个问题，但是我不知道。这是我到目前为止所拥有的： HTML * { margin: 0; padding: 0; } body { background-color: tan; color: black; } div.grid { display: grid; grid-template: repeat(2, auto auto) / repeat(4, max-content); } .grid > div.row { grid-column: span 4; display: grid; grid-template-columns: subgrid; background-color: antiquewhite; } .row > div.cell { grid-column: span 2; display: grid; grid-template-columns: subgrid; } .cell > div.frame { max-height: 100%; height: 100%; } .frame > img.icon { max-width: 100%; max-height: 100%; } .cell > p.note { width: min-content; } <div class=grid> <div class="row"> <div class="cell"> <div class="frame"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> </div> <p class="note">Matthew Patel</p> </div> <div class="cell"> <div class="frame"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> </div> <p class="note">Lucas Lee</p> </div> </div> <div class="row"> <div class="cell"> <div class="frame"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> </div> <p class="note">Todd Ingram</p> </div> <div class="cell"> <div class="frame"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> </div> <p class="note">Roxie Richter</p> </div> </div> </div> 我选择了这种布局，因为即使在不同的图像尺寸下，网格似乎也能保持对齐。不管怎样，我就是这样走到这一步的。也许我没理解“100%”？感谢帮助和反馈。我会首先简化你的 HTML 结构，然后更新 CSS，如下所示。 body { background-color: tan; color: black; margin 0; } .grid { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 20px; background-color: antiquewhite; width: fit-content; } .cell { display: grid; grid-template-columns: 1fr 1fr; } img.icon { height: 0; min-height: 100%; } .cell > p.note { width: min-content; } <div class=grid> <div class="cell"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> <p class="note">Matthew Patel</p> </div> <div class="cell"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> <p class="note">Lucas Lee</p> </div> <div class="cell"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> <p class="note">Todd Ingram</p> </div> <div class="cell"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> <p class="note">Roxie Richter</p> </div> </div>

html css css-grid responsive-images subgrid

回答 1 投票 0

如何修复使用图片和源 html 元素的响应式图像的布局转换？

我在使用元素时遇到的一个问题是，尽管在和图像后备上提供了宽度和高度属性，但仍然存在

html css responsive lighthouse responsive-images

回答 1 投票 0

无法让 NgOptimizedImage 在 Angular 15 中做出响应

在 Angular 15.1.x 项目中，我正在尝试使用 NgOptimizedImage 实现一个在移动和桌面上响应的图像。强制的 img 宽度和高度属性会覆盖尺寸

html angular responsive-images

回答 1 投票 0

为什么响应式图像在弹性容器内缩小并且不占据响应式屏幕尺寸上的整个空间？

我想防止图像在弹性盒内收缩，从而在弹性容器内留下太多空间。事实上，图像是使用 Bootstrap 5 类中的 img-fluid 类来制作响应式的......

bootstrap-4 media-queries responsive image-scaling responsive-images

回答 1 投票 0

如何根据屏幕尺寸预加载图像

我想根据屏幕尺寸预加载图像，所以我使用：我想根据屏幕尺寸预加载图像，所以我使用： <link rel="preload" as="image" href="/imagemax.png" media="(min-size:800px)" > <link rel="preload" as="image" href="/imagemed.png" media="()" > <link rel="preload" as="image" href="/imagemin.png" media="(max-size:599px)"> 我不确定如何预加载中型图像。我见过的所有示例仅涉及最小和最大屏幕尺寸，而不是中间值。当屏幕>599px和<800px时如何触发预加载？你可以试试这个代码。 <link rel="preload" as="image" href="/imagemed.png" media="(min-size:800px) and (max-size: 599px)"> 使用“和”它将定位屏幕最大和最小宽度之间的宽度。

html preload responsive-images

回答 1 投票 0

使黑白图像在悬停时变成彩色 - HTML/CSS/Javascript

有谁知道如何在将鼠标悬停在黑白图像上时使它们变为彩色动画。这就像以数字方式展示一幅画或制作文本填充动画（如果有意义的话）。我

html css image css-animations responsive-images

回答 1 投票 0

Cargo 网站仅针对移动设备定制 css

我的网站在桌面上看起来不错，但在移动版本上，标题的位置很奇怪。如何更改标题字体大小和位置而不更改桌面版本。还有我的头像...

css customization response-headers responsive-images cargo

回答 1 投票 0

Flexbox 内的图像高度在 Chrome 中不起作用

我有一个使用 Flexbox 来居中其项目的 div。在这个 div 中我有 3 个元素，其中之一是图像。我有一个 div 使用 flexbox 将其项目居中。在这个div里面我有3个元素，其中一个是图像。 <div id="flex-container"> <div id="container1"></div> <img src="#" alt=""> <div id="container2"></div> </div> #container1和#container2有自己的高度，img应该使用#flex-container内部的剩余高度。此代码片段适用于 Firefox，但不适用于 Chrome。 (jsfiddle) #flex-container{ height: 300px; width: 500px; display: flex; display: -webkit-flex; flex-flow: column nowrap; -webkit-flex-flow: column nowrap; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; border: 5px solid black; } #container1, #container2{ height: 100px; width: 300px; background: orange; flex: 1 0 auto; -webkit-flex: 1 0 auto; } <div id="flex-container"> <div id="container1">300x100 px</div> <img src="http://i.imgur.com/RRUe0Mo.png" alt=""> <div id="container2">300x100 px</div> </div> Chrome 需要为 Flexbox 添加 -webkit- 前缀，但问题似乎不是这个。会发生什么？是浏览器错误还是我忘记了什么？您需要克服两个问题： Firefox 自己解决了这两个问题，但 Chrome 需要帮助。问题#1 第一个问题是弹性项目默认不能小于其内容。弹性项目的初始设置是 min-height: auto。因此，具有替换元素的 Flex 项目（例如图像）将默认为图像的固有大小。该项目无法变小，除非您覆盖初始设置（使用 min-height: 0）。 #flex-container { height: 300px; width: 500px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; border: 5px solid black; } #container1, #container2 { height: 100px; width: 300px; background: orange; flex: 1 0 auto; } img { min-height: 0; } /* NEW */ <div id="flex-container"> <div id="container1">300x100 px</div> <img src="http://i.imgur.com/RRUe0Mo.png" alt=""> <div id="container2">300x100 px</div> </div> 可以在这里找到此问题的完整解释：为什么弹性项目不会缩小到超过内容大小？问题#2 然后你遇到了第二个问题：保持纵横比。这是柔性容器中的常见问题。一种选择是定义图像的高度： #flex-container { height: 300px; width: 500px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; border: 5px solid black; } #container1, #container2 { height: 100px; width: 300px; background: orange; flex: 1 0 auto; } img { min-height: 0; height: 100px; } /* NEW */ <div id="flex-container"> <div id="container1">300x100 px</div> <img src="http://i.imgur.com/RRUe0Mo.png" alt=""> <div id="container2">300x100 px</div> </div> 感谢评论中的@alexandr，这对我来说是完美的解决方案： object-fit: contain; // done on the image resizes the height 我只是把它放在这里，因为这是一个正确的答案，可能会作为评论而被错过。

css google-chrome flexbox responsive-images

回答 2 投票 0

responsive-images 相关问题

最新问题