只使用css和html在img达到一定的宽度后将其打包？

xqnpmsa8 于 2022-12-27 发布在其他

关注(0)|答案(1)|浏览(127)

我有一个flex-container，它的结构如下：

柔性容器
柔性容器1
h1
p
按钮，按钮
柔性容器2
影像

我希望这张图片在低于一定大小（比如说250px）时自动换行。
在缩小浏览器大小时，我希望将content-left和content-right放在一列中，而不是单行中。
我认为设置min-width将有助于实现这一点，但在设置最小宽度为某个值后，图像停止缩小，并保持在正确的。
这是我的HTML和CSS：

img {
  margin: auto 5%;
  width: 90%;
  min-width: 250px;
}

.content {
  display: flex;
  align-items: flex-start;
  padding: 100px 0;
  flex-wrap: wrap;
}

.content-left {
  display: flex;
  width: 40%;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 10%;
}

.content-right {
  display: flex;
  width: 50%;
  flex-direction: column;
  align-items: flex-start;
}

<div class="content">
  <div class="content-left">
    <h1 id="content-head">This website is awesome</h1>
    <p id="content-data" class="header-item">
      This website has some subtext that goes here under the main title. It's smaller font and color is lower contrast
    </p>
    <button type="button" id="content-button">Sign-up</button>
  </div>
  <div class="content-right">
    <img src="https://via.placeholder.com/150" alt="motion-blurred image" />
  </div>
</div>

css

来源：https://stackoverflow.com/questions/74908062/wrap-img-after-getting-to-a-certain-width-by-using-only-css-and-html

1条答案

按热度按时间

pw136qt21#

仅仅在.content-left中添加min-width: 250px;就足够了。我想在这种情况下，content-left和content-right应该是全角的。在css中添加了一个新的规则来实现媒体查询。

img {
  margin: auto 5%;
  width: 90%;
  min-width: 250px;
}

.content {
  display: flex;
  align-items: flex-start;
  padding: 100px 0;
  flex-wrap: wrap;
}

.content-left {
  display: flex;
  width: 40%;
  min-width: 250px;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 10%;
}

.content-right {
  display: flex;
  width: 50%;
  flex-direction: column;
  align-items: flex-start;
}

@media screen and (max-width: 1000px) {
  .content-left {
    width: unset;
  }
  .content-right {
    width: unset;
  }
}

<div class="content">
  <div class="content-left">
    <h1 id="content-head">This website is awesome</h1>
    <p id="content-data" class="header-item">
      This website has some subtext that goes here under the main title. It's smaller font and color is lower contrast
    </p>
    <button type="button" id="content-button">Sign-up</button>
  </div>
  <div class="content-right">
    <img src="./image" alt="motion-blurred image" />
  </div>
</div>

赞(0）回复(0）举报 2022-12-27

我来回答

只使用css和html在img达到一定的宽度后将其打包？

1条答案

相关问题

热门标签

最新问答