当前位置： 文江博客话题详情

响应式图像不同的尺寸

发布于 2025-02-07 03:08:19 字数 2540 浏览 4 评论 0原文

我已经尝试搜索此问题，但找不到足够的问题。 我有一个响应迅速的网站，在PC上看起来很棒，但是在移动设备上，画廊的图像都是不同的尺寸。实际图像都是相同的尺寸，但是移动图似乎使它们随着它们的发展而成长。在Android和iPhone上进行了测试。 屏幕截图： PC上的网站 android上的网站＆amp; iPhone上的网站 因此，图像代码是：

@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}
img { max-width: 100%; height: 100%; }
@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}
<tr><td align="center" valign="middle"><a href="/Portfolio/Weddings/Bridal_Shoot/index.html" target="_blank"><img src="/images/weddings/Bridal_Shoot.jpg" alt="Click on image to open gallery" width="235" height="352" class="z-depth-2 rounded-circle img-fluid"/><BR>Bridal Shoot</a></td>
            <td align="center" valign="middle"><a href="/Portfolio/Weddings/Butler_Wedding/index.html" target="_blank"><img src="/images/weddings/Butler_Wedding.jpg" alt="Click on image to open gallery" width="235" height="352" class="z-depth-2 rounded-circle img-fluid"/><BR>Butler Wedding</a></td>
            <td align="center" valign="middle"><a href="/Portfolio/Weddings/Engagement_Session/index.html" target="_blank"><img src="/images/weddings/Engagement_Session.jpg" alt="Click on image to open gallery" width="235" height="352" class="z-depth-2 rounded-circle img-fluid"/><BR>Engagement Session</a></td>
            <td align="center" valign="middle"><a href="/Portfolio/Weddings/Fluke–Chenault_Wedding/index.html" target="_blank"><img src="/images/weddings/Fluke–Chenault_Wedding.jpg" alt="Click on image to open gallery" width="235" height="352" class="z-depth-2 rounded-circle img-fluid"/><BR>Fluke–Chenault Wedding</a></td></tr>
What am I missing here? Any help would be great. (I've tried using Bootstrap, but it made other images used on the page distorted).

原文

I've tried searching for this, but could not find a close enough issue.
I have a responsive web site, that looks great on a PC, but on mobile, the images of the gallery are all different sizes. The actual images are all identical sizes, but mobile seems to make them grow as they go. Tested on Android and iPhone.
Screenshots:
Site on PC
Site on Android & Site on iPhone
The image codes are thus:

@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}
img { max-width: 100%; height: 100%; }
@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}
<tr><td align="center" valign="middle"><a href="/Portfolio/Weddings/Bridal_Shoot/index.html" target="_blank"><img src="/images/weddings/Bridal_Shoot.jpg" alt="Click on image to open gallery" width="235" height="352" class="z-depth-2 rounded-circle img-fluid"/><BR>Bridal Shoot</a></td>
            <td align="center" valign="middle"><a href="/Portfolio/Weddings/Butler_Wedding/index.html" target="_blank"><img src="/images/weddings/Butler_Wedding.jpg" alt="Click on image to open gallery" width="235" height="352" class="z-depth-2 rounded-circle img-fluid"/><BR>Butler Wedding</a></td>
            <td align="center" valign="middle"><a href="/Portfolio/Weddings/Engagement_Session/index.html" target="_blank"><img src="/images/weddings/Engagement_Session.jpg" alt="Click on image to open gallery" width="235" height="352" class="z-depth-2 rounded-circle img-fluid"/><BR>Engagement Session</a></td>
            <td align="center" valign="middle"><a href="/Portfolio/Weddings/Fluke–Chenault_Wedding/index.html" target="_blank"><img src="/images/weddings/Fluke–Chenault_Wedding.jpg" alt="Click on image to open gallery" width="235" height="352" class="z-depth-2 rounded-circle img-fluid"/><BR>Fluke–Chenault Wedding</a></td></tr>

What am I missing here? Any help would be great. (I've tried using Bootstrap, but it made other images used on the page distorted).

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

孤凫 2025-02-14 03:08:19

这是您问题中包含的元素的响应式布局的示例。

请注意 - 这只是您可以使用CSS响应功能，属性和单位来做些什么的示例。

我包括@media查询，该查询在600px的断点下将列数从4减少到2。

为了演示一系列可能的阵列，我还使用了响应式单元：

  • ％
  • vw

属性：

  • expact> expact>

响应

  • expcion> >显示：flex

和一个响应函数：

  • min（）

工作示例：

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: min(100%, 960px);
  margin: 0 auto;
}

.gallery-link {
  display: block;
  flex: 0 0 22%;
  margin-bottom: 3%;
  line-height: 1.5;
  font-size: min(16px, 3vw);
  text-align: center;
  outline: 1px solid rgb(255, 0, 0);
}

.gallery-figure {
  display: block;
  width: 100%;
  margin: 0;
}

.gallery-image {
  display: block;
  width: 100%;
  border: 1px solid rgb(0, 0, 255);
  border-radius: 50%;
  aspect-ratio: 235/352;
}

@media screen and (max-width: 600px) {
  .gallery-link {
    flex: 0 0 44%;
  }
}
<div class="gallery">

  <a class="gallery-link" href="/Portfolio/Weddings/Bridal_Shoot/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Bridal_Shoot.jpg" title="Click on image to open gallery" alt="Bridal Shoot" />
    </figure>
    <figcaption>Bridal Shoot</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Butler_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Butler_Wedding.jpg" title="Click on image to open gallery" alt="Butler Wedding" />
    </figure>
    <figcaption>Butler Wedding</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Engagement_Session/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Engagement_Session.jpg" title="Click on image to open gallery" alt="Engagement Session" />
    </figure>
    <figcaption>Engagement Session</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Fluke–Chenault_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Fluke–Chenault_Wedding.jpg" title="Click on image to open gallery" alt="Fluke–Chenault Wedding" />
    </figure>
    <figcaption>Fluke–Chenault Wedding</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Bridal_Shoot/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Bridal_Shoot.jpg" title="Click on image to open gallery" alt="Bridal Shoot" />
    </figure>
    <figcaption>Bridal Shoot</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Butler_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Butler_Wedding.jpg" title="Click on image to open gallery" alt="Butler Wedding" />
    </figure>
    <figcaption>Butler Wedding</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Engagement_Session/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Engagement_Session.jpg" title="Click on image to open gallery" alt="Engagement Session" />
    </figure>
    <figcaption>Engagement Session</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Fluke–Chenault_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Fluke–Chenault_Wedding.jpg" title="Click on image to open gallery" alt="Fluke–Chenault Wedding" />
    </figure>
    <figcaption>Fluke–Chenault Wedding</figcaption>
  </a>

</div>

Here is an example of a responsive layout for the elements included in your question.

Please note - this is just an example of what you can do with CSS responsive features, properties and units.

I have included a @media query which reduces the number of columns from 4 to 2 at a breakpoint of 600px.

To demonstrate an array of what's possible I have also used responsive units:

  • %
  • vw

a responsive property:

  • aspect-ratio

a responsive display:

  • display: flex

and a responsive function:

  • min()

Working Example:

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: min(100%, 960px);
  margin: 0 auto;
}

.gallery-link {
  display: block;
  flex: 0 0 22%;
  margin-bottom: 3%;
  line-height: 1.5;
  font-size: min(16px, 3vw);
  text-align: center;
  outline: 1px solid rgb(255, 0, 0);
}

.gallery-figure {
  display: block;
  width: 100%;
  margin: 0;
}

.gallery-image {
  display: block;
  width: 100%;
  border: 1px solid rgb(0, 0, 255);
  border-radius: 50%;
  aspect-ratio: 235/352;
}

@media screen and (max-width: 600px) {
  .gallery-link {
    flex: 0 0 44%;
  }
}
<div class="gallery">

  <a class="gallery-link" href="/Portfolio/Weddings/Bridal_Shoot/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Bridal_Shoot.jpg" title="Click on image to open gallery" alt="Bridal Shoot" />
    </figure>
    <figcaption>Bridal Shoot</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Butler_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Butler_Wedding.jpg" title="Click on image to open gallery" alt="Butler Wedding" />
    </figure>
    <figcaption>Butler Wedding</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Engagement_Session/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Engagement_Session.jpg" title="Click on image to open gallery" alt="Engagement Session" />
    </figure>
    <figcaption>Engagement Session</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Fluke–Chenault_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Fluke–Chenault_Wedding.jpg" title="Click on image to open gallery" alt="Fluke–Chenault Wedding" />
    </figure>
    <figcaption>Fluke–Chenault Wedding</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Bridal_Shoot/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Bridal_Shoot.jpg" title="Click on image to open gallery" alt="Bridal Shoot" />
    </figure>
    <figcaption>Bridal Shoot</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Butler_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Butler_Wedding.jpg" title="Click on image to open gallery" alt="Butler Wedding" />
    </figure>
    <figcaption>Butler Wedding</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Engagement_Session/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Engagement_Session.jpg" title="Click on image to open gallery" alt="Engagement Session" />
    </figure>
    <figcaption>Engagement Session</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Fluke–Chenault_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Fluke–Chenault_Wedding.jpg" title="Click on image to open gallery" alt="Fluke–Chenault Wedding" />
    </figure>
    <figcaption>Fluke–Chenault Wedding</figcaption>
  </a>

</div>

回复 原文
习ぎ惯性依靠 2025-02-14 03:08:19
https://youtu.be/tmWvwp3rpso

请检查链接上方，您将获得图像响应型的解决方案，还可以检查边界 - 拉迪乌斯属性是否圆形图像

https://youtu.be/tmWvwp3rpso

Please check above the link, you will get the solutions for the image responsive and also check the border-radius property for circle image

回复 原文
小瓶盖 2025-02-14 03:08:19

with W：100％IH：100％您告诉您的图像以在容器上缩放最大W和H，只需使用宽度：100％即可。我总是使用一些容器，而不是将IMG放在背景中，因此我使用backgroun-lit和背景大小：封面；之后，您只是用容器宽度和高度来操纵，并且在背景positon的情况下，您可以针对您要显示的图像的哪一部分，如果IMG对于移动设备太大，您也可以使用Transform：Scaile：scale以缩放

Well with w: 100% i h: 100% you told your image to scale max w and h on container, just use width: 100%. I use always some container than put img inside as background so i use backgroun-position and background-size: cover; after that you manipulate just with container width and height, and with background-positon you target what part of image you want to show if img is too big for mobile , you can also use transform : scale to zoom in

回复 原文
~没有更多了~

关于作者

带上头具痛哭

暂无简介

文章
评论
814 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文