问题：

使用FlexBox缩小图像。包装图像扩展到100%宽度

尹承泽

2023-03-14

我创建了一个显示电影封面的小示例，我喜欢“Flex：calc（...）”在行动中。随着浏览器窗口的缩小，图像的大小也缩小了一点。但是，请注意，当图像包装时，包装的图像是全宽的。是否可以使包装的图像与上面的图像大小相同？

null

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.movies {
  max-width: 1300px;
  margin: 0 auto;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-item {
  margin: 10px 15px 0;
}

.flex-item > img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Tablet */
@media screen and (min-width: 40em) {
  body {
    background: limegreen;
  }
  
  .movies {
    max-width: 700px;
  }

  .flex-item {
    margin: 0 15px 32px;
    flex: calc(50% - 30px);
  }
}

/* Desktop */
@media screen and (min-width: 70em) {
  body {
    background: lightyellow;
  }

  .movies {
    max-width: 1200px;
  }

  .flex-item {
    margin: 0 6px 15px;
    flex: calc(33.3333% - 20px);
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="learn-flex.css">
  <title>Learn Flex</title>
</head>
<body>
  <div class="movies">
    <div class="flex-container">
      <div class="flex-item-1 flex-item">
        <img src="https://images-na.ssl-images-amazon.com/images/I/81PWF-yAEyL._AC_SL1100_.jpg" alt="">
      </div>
      <div class="flex-item-2 flex-item">
        <img src="https://images-na.ssl-images-amazon.com/images/I/71VDlRubWtL._AC_SY741_.jpg" alt="">
      </div>
      <div class="flex-item-3 flex-item">
        <img src="https://fanart.tv/fanart/movies/12230/movieposter/101-dalmatians-5a529ef29b36c.jpg" alt="">
      </div>
    </div>
  </div>
</body>
</html>

null

我希望与狗的图像是相同的大小，上面的，并留下的空间在右侧的空，因为没有第四个覆盖。用FlexBox有可能实现这一点吗？

共有1个答案

平山

2023-03-14

如果您正在设置flex项的宽度，您还可以要求它既不收缩也不增长。例如，在您的平板电脑盒中：

  .flex-item {
    margin: 0 15px 32px;
    flex: 0 0 calc(50% - 30px);

null

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.movies {
  max-width: 1300px;
  margin: 0 auto;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-item {
  margin: 10px 15px 0;
}

.flex-item > img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Tablet */
@media screen and (min-width: 40em) {
  body {
    background: limegreen;
  }
  
  .movies {
    max-width: 700px;
  }

  .flex-item {
    margin: 0 15px 32px;
    flex: 0 0 calc(50% - 30px);
  }
}

/* Desktop */
@media screen and (min-width: 70em) {
  body {
    background: lightyellow;
  }

  .movies {
    max-width: 1200px;
  }

  .flex-item {
    margin: 0 6px 15px;
    flex: 0 0 calc(33.3333% - 20px);
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="learn-flex.css">
  <title>Learn Flex</title>
</head>
<body>
  <div class="movies">
    <div class="flex-container">
      <div class="flex-item-1 flex-item">
        <img src="https://images-na.ssl-images-amazon.com/images/I/81PWF-yAEyL._AC_SL1100_.jpg" alt="">
      </div>
      <div class="flex-item-2 flex-item">
        <img src="https://images-na.ssl-images-amazon.com/images/I/71VDlRubWtL._AC_SY741_.jpg" alt="">
      </div>
      <div class="flex-item-3 flex-item">
        <img src="https://fanart.tv/fanart/movies/12230/movieposter/101-dalmatians-5a529ef29b36c.jpg" alt="">
      </div>
    </div>
  </div>
</body>
</html>

类似资料：

Flexbox图像按高度缩放并保持长宽比

我有一个使用CSS flexbox缩放到可用高度的DIV。在这个DIV中，我想在两个维度上与DIV一起缩放图像。这意味着它应该被缩放以保持其长宽比，并且小于相应DIV维度的维度应该居中。我可以使图像跟随DIV的宽度，但不能跟随高度。因此，肖像图像脱离DIV界限。这里有一个jsFiddle来演示这个问题。
使用壁画缩小图像

我正在开发一个画廊屏幕，允许用户从设备中选择一些图像并发送给另一个用户。我正在使用加载图像，但是根据设备的不同，图像加载非常慢，屏幕上的滚动也很慢。谁知道怎么解决这个问题？谢谢！
使包装器采用子图像的最大宽度？

问题内容：我不确定我是否能够正确说出问题的意思，但是我想通过示例简单地了解要完成的工作。但是没有给wqrapping div一个固定的宽度。因此，基本上，我希望包装器采用图像的宽度而不是过度扩展的文本。有什么办法吗？还要注意，我不能使用绝对定位，因为从数据库传来的图像和文本每次都不同。来自第一个链接的代码：来自第二个链接的代码：问题答案：有一个“哈克”的方式，用另一个显示属性您的包装
Flexbox-图像溢出

我试图创建一个包含两个项目的flex容器--一个文本div和一个图像div。然而，我在容器中保存映像时遇到了实际的问题。当我将浏览器的大小调整为一个小宽度时，图像就会溢出容器，我似乎不明白为什么会发生这种情况。物品应该留在容器里吗？代码在这里：代码本在这里： http://codepen.io/reskk/pen/aldpbz 我四处寻找并尝试了一些解决方案：使用flex-basis、fle
使所有商店图像都成为Magento中的基础图像，小图像和缩略图图像？

问题内容：我的Magento商店有大约3,000种产品。几乎所有这些产品都附有单个图像。出于某种原因，即使我将小图像和缩略图图像设置为与导入CSV文件中的基本图像相同，也仅为每个产品设置了基本图像。这意味着当您搜索产品时，您会获得一个占位符- 但是进入产品页面后，您将获得正确的图像。可以通过进入产品管理页面并选择小图像和缩略图的框来轻松解决此问题。问题是，使用3,000张图像，这将需要很长时
扩展中的TYPO3 FAL图像

我在这里读了很多关于TYPO3中FAL图像的帖子我已经更新到TYPO3 v10，现在我需要使用FAL渲染我的图像我找不到一个解决方案使它从零开始工作我在自定义Fluid Extbase扩展中使用此选项。我得到的是FlexForm：我现在如何访问这些图像如果我调试它，我只会在前端得到INT“1”。我知道我需要一个数据处理器，但是把它放在哪里，具体放什么？我有一个打字错误，我能把处理器

使用FlexBox缩小图像。包装图像扩展到100%宽度

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档