responsive-images 相关问题

响应式图像是响应式网页设计（RWD）的一部分，专门处理网络上的图像，可根据屏幕尺寸，平台和方向在各种设备上提供最佳体验。

无法让 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

响应式图像在移动浏览器中无法正确加载

我有一个包含标题图像的网站。然而，当我在 iOS 上的 Firefox 或 Safari 中加载网站时，这些标题图像一开始似乎没有加载。这是一个屏幕截图：这是...的代码

html css responsive-design responsive responsive-images

回答 1 投票 0

CSS 中子元素的高度问题

我遇到了 .contenedor-elementos-generales 的子元素高度问题我不知道该怎么做才能修复它。我的主要 html 文件：我遇到了.contenedor-elementos-generales的子元素高度问题我不知道该怎么做才能解决它。我的主要 html 文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/index.css"> <title>Descontrol</title> </head> <body> <div class="layout"> <div class="item-grilla contenedor-carta"> <img src="." alt="" id="imgCarta" class="img-carta"> <div class="contenedor-consola-carta"> <span class="consola-carta" id="textoConsolaCarta">Descripción carta: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit obcaecati voluptatem eius quibusdam facilis dolores suscipit id a explicabo laborum.</span> </div> </div> <div class="item-grilla contenedor-consola-personaje"> <span class="consola-personaje" id="textoConsolaPersonaje">Consola: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum, vero nesciunt? Repellendus quos ipsam fugit?</span> </div> <div class="item-grilla contenedor-botones-juego"> <div class="boton-juego boton-levantarCarta" id="btnLevantarCarta"> <span>LEVANTAR CARTA</span> </div> <div class="boton-juego boton-atacar" id="btnAtacar"> <span>ATACAR</span> </div> </div> <div class="item-grilla encabezado-elementos-generales"> <div class="encabezado-personaje">AVATAR</div> <div class="encabezado-atributo">ATRIBUTO</div> <div class="encabezado-estado">ESTADO</div> </div> <div class="item-grilla contenedor-elementos-generales"> <div class="elemento-general contenedor-personaje"> <img src="img/vida.png" alt="" id="imgPersonaje" class="img-personaje"> </div> <div class="elemento-general contenedor-atributo"> <div class="atributo"> <img src="img/ataque.png" alt="" class="img-atributo"> <span class="text-atributo">0</span> </div> <div class="atributo"> <img src="img/esquiva.png" alt="" class="img-atributo"> <span class="text-atributo">0</span> </div> <div class="atributo"> <img src="img/velocidad.png" alt="" class="img-atributo"> <span class="text-atributo">0</span> </div> <div class="atributo"> <img src="img/vida.png" alt="" class="img-atributo"> <span class="text-atributo">0</span> </div> <div class="atributo"> <img src="img/vida.png" alt="" class="img-atributo"> <span class="text-atributo">0</span> </div> </div> <div class="elemento-general contenedor-estado"> <img src="img/vida.png" alt="" class="img-estado" id="imgEstado"> </div> </div> </div> <script src="js/main.js"></script> </body> </html> 我的CSS文件： * { all: initial; box-sizing: border-box; } * { border: 0; margin: 0; } body { font-size: 0.9rem; font-family: Titillium Web; } .layout { width: 100vw; height: 100vh; display: grid; grid-template-rows: repeat(18, 1fr); grid-template-columns: repeat(9, 1fr); outline: 1.5px solid #000; } .contenedor-carta { grid-column: 1/10; grid-row: 1/12; background: #000; display: flex; flex-direction: column; } .img-carta { height: calc((6/11)*100%); } .contenedor-consola-carta { height: calc((5/11)*100%); color: #fff; display: flex; justify-content: center; text-align: center; } .consola-carta { padding: 0 20px; padding-top: 50px; text-align: center; } .contenedor-consola-personaje { grid-column: 1/10; grid-row: 12/15; display: flex; align-items: center; justify-content: center; } .consola-personaje { text-align: center; padding: 30px; } .contenedor-botones-juego { grid-column: 1/10; grid-row: 15/16; display: flex; align-items: center; } .boton-juego { border-top: 1px solid #000; display: flex; justify-content: center; align-items: center; width: 50%; height: 100%; } .boton-juego.boton-levantarCarta { border-right: 1px solid #000; } .encabezado-elementos-generales { grid-column: 1/10; grid-row: 16/17; display: grid; grid-template-columns: repeat(9, 1fr); background: #000; color: #fff; } .encabezado-personaje, .encabezado-atributo, .encabezado-estado { display: flex; align-items: center; justify-content: center; text-align: center; } .encabezado-personaje { grid-column: 1/ span 2; } .encabezado-atributo { grid-column: 3 / span 5; } .encabezado-estado { grid-column: 8 / span 2; } .encabezado-elementos-generales * { text-align: center; } .contenedor-elementos-generales { grid-column: 1/10; grid-row: 17/-1; display: grid; grid-template-columns: repeat(9, 1fr); height: 100%; } .contenedor-personaje { grid-column: 1/3; background: #000; border: 1px solid #fff; } .contenedor-atributo { grid-column: 3/8; height: 100%; display: flex; flex-direction: row; align-items: stretch; background: #000; } .atributo { margin: 0 1px; overflow: hidden; display: flex; flex-direction: column; flex: 1; } .img-atributo { border: 1px solid #fff; height: 50%; background: #fff; } .text-atributo { margin-top: 2px; height: 50%; background: #fff; text-align: center; } .contenedor-estado { grid-column: 8/-1; background: #000; border: 1px solid #fff; } @media only screen and (min-width: 600px) { body { display: flex; justify-content: center; } .layout { width: 60vw; } } @media only screen and (min-width: 700px) { body { display: flex; justify-content: center; } .layout { width: 40vw; } } .layout元素被假设为一个9x18的网格，与任何窗口的尺寸相匹配，它做到了，问题是元素.contenedor-personaje、contenedor-atributo和.contenedor-estado的高度。如果您发现其他错误或有建议，请随时告诉我，我仍然是网页设计的初学者。导航器：Chrome 操作系统：Ubuntu 20.04 您似乎正在开发一个使用 CSS 网格来构建各个部分的布局。根据您的描述，问题与 .contenedor-elementos-generales 中的 .contenedor-personaje、.contenedor-atributo 和 .contenedor-estado 元素的高度有关。这些元素的高度在网格内可能不会按预期运行。要解决这些元素的高度问题，您可以考虑进行一些修改：调整网格行高：确保 .contenedor-elementos-generales 网格中的行具有正确的高度以容纳这些元素中的内容。处理百分比高度：具有百分比高度的元素通常依赖其父元素的高度来计算自己的高度。确保所有父元素都有一个定义的高度，可以根据这些基于百分比的高度正确计算。在您的情况下， .contenedor-elementos-generales 的指定高度为 100%，但其父级 .layout 没有固定高度。尝试为 .layout 设置固定高度或使用 100vh（视口高度）以确保网格内正确的百分比计算。例如： .layout { /* existing styles */ height: 100vh; /* Set the layout height to be 100% of the viewport height */ } .contenedor-elementos-generales { /* existing styles */ height: calc(100% - [adjust for other elements' heights]); /* Adjust the height calculation as needed */ } 调整网格中的高度可能需要对百分比值进行一些试验，以完美地满足您的布局要求。另外，确保没有冲突的样式或填充/边距影响整体高度计算。请记住在不同的视口大小上测试您的布局，以确保响应能力和一致的行为。

html css responsive-design height responsive-images

回答 1 投票 0

使用具有艺术指导的响应式图像

是否可以使用响应式图像来获取适当大小的图像，以及在移动设备上显示不同图像的艺术指导？我还没有看到任何带有 t 示例的文档...

html image responsive-images

回答 2 投票 0

如何修复以下代码以允许 Bootstrap 5.3 中提供的卡片具有移动响应能力？

`我不知道下面的代码做错了什么。我一直在尝试编辑它，但我觉得我让事情变得更糟。我不明白我在设置容器、行和

html css sass bootstrap-5 responsive-images

回答 1 投票 0

Flutter：如何在启动前确定图像的缓存大小？

Flutter DevTools 显示消息：考虑提前调整资源大小、提供 35 的 cacheWidth 参数、35 的 cacheHeight 参数或使用 ResizeImage。因为我的形象...