标签: responsive-images

我的sizes属性一直都有问题.我刚才问过一个问题,你应该宣布哪个订单的尺寸和Yoav说:

"你的尺寸值应该从最窄的断点开始,然后逐渐向更宽的断点移动,所以在你的情况下它应该是(最小宽度:62.5em)25vw,(最小宽度:30em)50vw,100vw.

否则,如果你在视网膜屏幕上,在确定要选择哪个图像时也会考虑屏幕的DPR."

这是有道理的,但在这种情况下会发生什么.假设您在移动设备上有100vw的图像,但容器max-width: 380px上有图像.我会这样做:

sizes="(min-width: 380px) 380px, 100vw"

和我一起到目前为止？凉.在700px时,布局变为两列,因此您希望图像为50vw.所以我会这样做:

sizes"(min-width: 700px) 50vw, (min-width: 380px) 380px, 100vw"

但是,技术上在最小宽度:700px时图像现在小于最小宽度:380px值,因为700/2 = 350px所以现在订单应该是:

sizes"(min-width: 380px) 380px, (min-width: 700px) 50vw, 100vw" ？

然后在1024px处布局变为3列,在1200px处外部容器停止布局不再扩展,所以我想要这样的东西:

sizes"(min-width: 1220px) 380px, (min-width: 1024px) 33vw, (min-width: 700px) 50vw, (min-width: 380px) 380px, 100vw"

它是否正确？

为摄影师/摄像师设计作品集，并尝试在移动设备上的快速加载和良好图像质量之间找到良好的平衡。到目前为止，我热衷于押宝图片元素，以根据设备的最大宽度加载图像的多个版本，如下所示：

<picture>    https://stackexchange.com/users/10606791?tab=reputation
  <source media="(max-width: 360px)" 
          srcset="picture_small.jpg">

  <source media="(max-width: 640px)"
          srcset="picture_medium.jpg">

  <source media="(max-width: 1366px)"
          srcset="picture_large.jpg">

  <img src="picture_original.jpg" width="6000" height="4000"
          alt="Really usefull description for each image">
</picture>

我担心的是，图片的前3个版本的用户代理都将完全忽略“ alt”属性，希望搜索引擎使用它也是一个漫长的尝试。

我试图使图像适合浏览器窗口的高度,并动态响应窗口大小.

我需要图像宽高比保持不变,但如果在大屏幕上观看,图像可能比原始分辨率大.

我不希望图像溢出屏幕外并产生一种掠夺效果.

图像必须在容器内部垂直和水平保持居中.

这是我想要实现的一个例子.

我想用Bootstrap创建一个响应式图像网格。我有4张图片，我需要1x4网格（用于桌面尺寸）和2x2网格（用于移动尺寸）。我尝试了以下代码，但是在桌面大小的图像之间没有不必要的空白。此外，手机大小也没有空间。如何调整此布局？

提前致谢

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
        </div>
    </div>
</div>

我已经建立了响应式网站，它在除 iOS 之外的所有设备上都能正常工作。在 iOS 设备上，我的背景图像变得模糊。

这是我的网站的链接。http://www.idynxschool.com/vesco/

你可以在iPhone上查看它，你会发现图像模糊。这是做视网膜准备图像的东西吗？

任何解决方案将不胜感激。

谢谢

为了使响应图像在小屏幕上按比例缩小,我目前使用max-width: 100%;(或固定的最大宽度).与指定固定大小相反,这有一个可怕的缩小,因为当页面加载时,浏览器不为图像分配空间,只能在开始下载后才这样做.在加载所有图像之前,这会导致大量布局重排和糟糕的体验.

这似乎很容易修复 - 毕竟,我只需告诉浏览器实际大小是什么,以便它可以在下载前找出宽高比和最终大小.首先,我想知道这是什么width和heighthtml属性是什么,但我知道这不是他们的目的,因为他们可以用于重新缩放图像和更改最终大小.

我真正想要的是像" srcwidth"和" srcheight"那样告诉浏览器图像文件的实际大小,以便在知道宽高比以使用max-width样式之前不必加载.但是根据我的发现,没有像这些属性这样的东西.真的没有办法实现这个目标吗？

我尝试以这种方式使用实际width和heighthtml属性,然后用CSS覆盖它,但浏览器根本不关心它.

请帮忙 ！！！

我正在使用引导卡制作我网站的一部分。我在卡片的圆形图像中遇到问题。我希望我的图像在我将它们放入卡片的图像圆圈中时不会拉伸。有没有办法放大以圆圈显示图像时在图像中间还是我在我的 scss 代码中做错了什么？

这是问题：

预期输出：

这些图像的尺寸：

910x592、1230x802、1230x794

引导代码：

<section class="about-cards-section">
        <div class="container">
            <div class="row">
                <div class="col-sm-4 card-wrapper">
                  <div class="card card-style" >
                    <img class="card-img-top rounded-circle circle-image" src="img/about/card-one.png" alt="Card image cap">
                      <!-- <img src="img/about/card-one.png" class="img-circle" alt="Cinque Terre" width="250" height="236">  -->

                    <div class="card-body">
                      <h3 class="card-title">Our Facilities</h3>
                      <p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
                    </div>
                  </div>
                </div>

                <div class="col-sm-4 card-wrapper">
                  <div class="card card-style">
                    <img class="card-img-top rounded-circle circle-image" src="img/about/card-two.png" alt="Card image cap">
                    <div class="card-body">
                      <h3 class="card-title">Our …

我正在通过 Google 的页面速度分析器运行一个页面，对于移动设备，它告诉我应该下载适当尺寸的图像。我知道视口大小，但不知道插槽的宽度，因为我们使用的是响应式布局。我查看了文档和一堆示例，但没有一个使用我认为应该是正确的图像。

开发人员工具的“网络”选项卡显示我们正在下载移动版 about.webp，而不是较小的图像（200 像素或 400 像素）。即使将 Chrome 中的设备更改为较小的视口宽度，它仍然会下载 about.webp。

picture使页面速度分析器使用适当图像的元素的正确 HTML 是什么？

下面是我的picture元素。谢谢！

<div class="row"><div class="col-md-3">
    <picture>
        <source type="image/webp" 
            sizes="(max-width: 200px) 200px,
              (max-width: 400px) 400px,
              (max-width: 1500px) 1500px" 
            srcset="//cdn.storyboardthat.com/site-images/articles/education/about-sbt-w200.webp 200w,
//cdn.storyboardthat.com/site-images/articles/education/about-sbt-w400.webp 400w, 
//cdn.storyboardthat.com/site-images/articles/education/about-sbt.webp 1500w">
        <source type="image/png" 
            sizes="(max-width: 200px) 200px, 
              (max-width: 400px) 400px, 
              (max-width: 1500px) 1500px" 
            srcset="//cdn.storyboardthat.com/site-images/articles/education/about-sbt-w200.png 200w, 
//cdn.storyboardthat.com/site-images/articles/education/about-sbt-w400.png 400w, 
//cdn.storyboardthat.com/site-images/articles/education/about-sbt.png 1500w">
            <img src="//cdn.storyboardthat.com/site-images/articles/education/about-sbt.png" 
              alt="Storyboard That" 
              title="Storyboard That" 
              class="lazyload " 
              style="max-width:100%;height:auto;" 
              width="1500" height="400" loading="lazy"> 
    </picture>
</div>

我目前有以下 CSS 代码，可应用于div显示响应式图像的元素。

.my-img-container {
  position: relative;
  &:before {
    display: block;
    content: " ";
    background: url("https://lorempixel.com/300/160/") no-repeat;
    background-size: 100% 100%;
    width: 100% !important;
    padding-top: 56.25%;
  }
  >img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
  }
}

<div class="my-img-container">
  <img srcset="https://lorempixel.com/540/304 540w, https://lorempixel.com/960/540 960w" sizes="(min-width: 576px) 540px, 100vw" src="https://lorempixel.com/300/160">
</div>

我想要做的是在加载响应图像时在后台显示图像，因此content在 CSS 中，但它不起作用。知道为什么吗？

这是我的img标签：

<img src="https://myserver.com/image?w=667&h=375 667w" 
  srcset="https://myserver.com/image?w=1366&h=1024 1366w 1x,
  https://myserver.com/image?w=1366&h=1024&dpr=2 1366w 2x,
  https://myserver.com/image?w=1366&h=1024&dpr=3 1366w 3x,
  https://myserver.com/image?w=1024&h=768 1024w 1x,
  https://myserver.com/image?w=1024&h=768&dpr=2 1024w 2x,
  https://myserver.com/image?w=1024&h=768&dpr=3 1024w 3x,
  https://myserver.com/image?w=800&h=480 800w 1x,
  https://myserver.com/image?w=800&h=480&dpr=2 800w 2x,
  https://myserver.com/image?w=800&h=480&dpr=3 800w 3x" sizes="100%">

我正在使用 imgix，它根据dpr查询参数以正确的像素密度返回图像。以上似乎不起作用，图像未以正确的尺寸呈现。我没有使用正确的格式吗？