标签: responsive-images

我目前正在为一家公司开发移动登陆页面.这是一个非常基本的布局,但在标题下面有一个产品的图像,它总是100%宽度(设计显示它总是从边缘到边缘).根据屏幕的宽度,图像的高度显然会相应调整.我最初使用img(CSS宽度为100%)做了这个并且效果很好但是我意识到我想使用媒体查询来根据不同的分辨率提供不同的图像 - 比方说小,中等例如,同一图像的大版本.我知道你不能用CSS改变img src所以我想我应该使用CSS背景作为图像而不是HTML中的img标签.

我似乎无法正常工作,因为带背景图像的div需要宽度和高度来显示背景.我显然可以使用'width:100%',但我对高度有什么用？我可以像150px一样随机固定高度然后我可以看到图像的前150px,但这不是解决方案,因为没有固定的高度.我有一个游戏,发现一旦有高度(用150px测试),我可以使用'background-size:100%'来正确地将图像放入div中.我可以在这个项目中使用最新的CSS3,因为它仅针对移动设备.

我在下面添加了一个粗略的例子.请原谅内联样式,但我想给出一个基本的例子,试着让我的问题更清晰一些.

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

我是否可能必须根据整个页面给容器div一个百分比高度,或者我看到这个完全错误？

另外,你认为CSS背景是最好的方法吗？也许有一种技术可以根据设备/屏幕宽度提供不同的img标签.一般的想法是,着陆页模板将使用不同的产品图像多次,因此我需要确保以最佳方式开发.

我很抱歉这是一个有点啰嗦,但我从这个项目来回到下一个,所以我想完成这个小事.在此先感谢您的时间,非常感谢.问候

具有max-height样式的flexbox中的图像根据其是否具有其属性集height而显示为不同呈现width.

所述一个与属性,设置为图像的真实宽度/高度,使得与保留了其纵横比,但没有属性的那些尊重max-height和出现压扁.

.flex-parent {
  display: flex;
  max-height: 10vh;
}

<div class="flex-parent">
  <img                          src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
  <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
</div>

这就是Chrome 58中的显示方式(在Firefox 54中也是如此).

他们为什么渲染不同？管理这种行为的规则是什么？

我的(显然不正确)的理解是,高度和宽度属性会覆盖在图像加载时发现内在的高度和宽度,如果高度和宽度属性等于图像的尺寸,应该是在渲染一旦图像无差异装了.

上下文正在制作一个包含响应图像的页面,其中每个图像

• 可以有独特的原始尺寸
• 加载时不会导致重排,即在初始渲染时保留正确的空间(因此使用高度和宽度属性)
• 可以同时适应所有屏幕(因此我vh在CSS中搞乱)

青蛙图片来自https://en.wikipedia.org/wiki/File:Red_eyed_tree_frog_edit2.jpg

具有类.img-fluid的Bootstrap 4中的响应图像被不成比例地调整大小.它们保持高度均匀宽度正在缩小.这会使整个图像变形.有没有什么方法可以让它像使用类.img响应的Bootstrap 3一样流畅？谢谢

<div class="col-sm-6">
    <img class="img-fluid" src="/assets/blogs/14853991244821.jpg" alt="">
</div>

顺便说一句,它在Bootstrap 4文档(https://v4-alpha.getbootstrap.com/content/images/)中是相同的,其中样本svg图像保持高度250像素,而不管它的宽度.

我整晚都在阅读,似乎无法得出任何具体的答案,说明最好的办法是什么.两件事情,我知道这样做的工作是these-

对于加载时图像的淡入:

使用图像包装器和这样的<img>标签:

<div class="imageWrapper">
    <img src="img.jpg" alt="" onload="imageLoaded(this)">
</div>

和CSS看起来像

.imageWrapper {
  opacity: 0
}

.loaded {
  opacity: 1
}

然后在你的js文件中有类似的东西

var imageLoaded = (img) => {
    var imgWrapper = img.parentNode;
    imgWrapper.className += ' loaded';
}

用于根据屏幕大小加载不同的图像

@media screen only and (min-device-width: 0) and (max-device-width: 450px) {
  .backgroundImage {
    background: url('small_background_image.jpg');
  }
}

@media screen only and (min-device-width: 451px) and (max-device-width: 1024px) {
  .backgroundImage {
    background: url('medium_background_image.jpg');
  }
}

@media screen only and (min-device-width: 1025px) …

我有一个包含标题图像的网站。

然而，当我在 iOS 上的 Firefox 或 Safari 中加载网站时，这些标题图像一开始似乎没有加载。这里\xe2\x80\x99是截图：

这是相关标头的代码。

当我单击菜单中的不同页面时，会加载标题图像。为什么它们一开始不加载？

在 Safari 中从我的 iPhone 进行调试显示以下内容：

我认为这可能与正在加载的图像是 pruimendijk_oeverwoning_2560.jpg 文件这一事实有关，这不是我试图在移动设备上加载的文件。

这是相关的html：

<figure class="cover">\n  <img src="/img/pruimendijk_oeverwoning_01_2560.jpg"\n       srcset="/img/pruimendijk_oeverwoning_01_768.jpg 768w,\n               /img/pruimendijk_oeverwoning_01_1024.jpg 1024w,\n               /img/pruimendijk_oeverwoning_01_1440.jpg 1440w,\n               /img/pruimendijk_oeverwoning_01_1920.jpg 1920w,\n               /img/pruimendijk_oeverwoning_01_2560.jpg 2560w"\n       sizes="(max-width: 768px)   768px,\n              (max-width: 1024px) 1024px,\n              (max-width: 1440px) 1440px,\n              (max-width: 1920px) 1920px,\n              2560px"\n       alt="Een woning in Hof van Waelsicht"\n       class="cover-img">\n</figure>\n

这是相关的 scss：

.cover {\n  padding: 0;\n  margin: 9rem 0 0 0;\n  @include at-least ($S) {\n …

我想在我的网站上使用.avif和.webp来显示图像，请记住我需要为不受支持的浏览器提供后备。文档https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set()#using_image-set_to_provide_alternative_formats建议-webkit-image-set应该有所帮助：

background-image: url("/public/header-fallback.jpg");
background-image: -webkit-image-set(url('/public/header.avif') type('image/avif'), url('/public/header.webp') type('image/webp'), url('/public/header.jpg') type('image/jpeg'));

这在 Firefox 中有效（avif 被跳过并使用 webp），但 Chrome 给了我Invalid property value（整个样式被忽略并使用“header-fallback.jpg”）。为什么？

Flutter DevTools 显示消息：Consider resizing the asset ahead of time, supplying a cacheWidth parameter of 35, a cacheHeight parameter of 35, or using a ResizeImage. 因为我的图像大小取决于屏幕大小，所以我正在寻找一种动态设置它的方法。我尝试使用LayoutBuilder但感觉对每个图像都这样做有点太复杂了。

有没有人已经有过这方面的经验并提供任何建议？提前致谢！

看看这个:http: //www.consultacultura.it/portale_comunale_della_cultura.asp？IDcomune = 1

轮播图像不像它下面的图像那样响应.它们具有相同的类img-fluid.

我读过很多帖子，并尝试了一切使 iframe 响应并保持 16-9 比例...这还不错，但视频仍然在 YouTube 框架中被裁剪。

Bootstrap 5 有什么技巧？

<div class="embed-responsive embed-responsive-16by9" style="width:800px; height:450px">
      <iframe class="embed-responsive" title="YouTube video player" src="{{ $image['image']['url'] }}" frameborder="0" allowfullscreen="" width="100%" height="100%"></iframe>
</div> 

如何使用JavaScript检测浏览器是否支持 AVIF 图像？我查看了这个问题，在阅读答案后，我能够构建一个有用的单行函数来检查浏览器对各种图像类型的支持。

const isSupported = (type) => document.createElement('canvas').toDataURL(`image/${type}`).indexOf(`data:image/${type}`) === 0;

它对于webp( 和jpeg& png) 图像效果很好。但它不适用于avif( 和gif) 图像。

我所说的“不工作”是指即使浏览器支持 AVIF 图像，该函数也会返回 false。

那么，这种方法有什么问题呢？使用JavaScriptavif检测浏览器对图像的支持的正确方法是什么？