Question

我有一个包含4列的弹箱，在第一列中有一个图像。

我想要它以便图像响应（可以工作），但是一旦屏幕变大并且它不再缩小/扩展我就会喜欢它，以具有像素的最大宽度，而不是一个百分比。

我使用max-width: 100%;来使其响应，但是一旦屏幕变得足够大，它不会缩小或扩展，我希望它有一个{{1所以它不会继续增长。

如果我摆脱max-width: 250px;并将其更改为100%，则当屏幕变小时，它就不再响应。

我不想做媒体查询，因为我希望它能用于图片。

有没有这样做？

HTML

250px

CSS

<div class="container">
  <div class="row">
    <div class="col">
      <img src="https://s-media-cache-ak0.pinimg.com/236x/9d/db/c7/9ddbc7c118bcd047a06b44bae34bb413--exotic-flowers-tropical-flowers.jpg" />
    </div>
    <div class="col">
      This is a group of flex columns
    </div>
    <div class="col">
      Isn't that interesting?
    </div>
  </div>
</div>

Answer 1

一种解决方案是将<%= params.inspect %>设置为您的第一个max-width: 250px

Fiddle demo

Stack snippet

＆＃13;

.col

＆＃13;

.container {
  display: block;
  background-color: #fff;
  padding-left: 30px;
  padding-right: 30px;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  margin-left: -30px;
  margin-right: -30px;
  padding: 15px 0 60px;
}

.col {
  border: 1px solid black;
  padding-left:30px;
  padding-right:30px;
  min-width: 0;
}

.col img {
  max-width: 100%;
  max-height: 250px;
}

.col:first-child {
  max-width: 250px;
}

＆＃13;

另一种选择是将<div class="container"> <div class="row"> <div class="col"> <img src="https://s-media-cache-ak0.pinimg.com/236x/9d/db/c7/9ddbc7c118bcd047a06b44bae34bb413--exotic-flowers-tropical-flowers.jpg" /> </div> <div class="col"> This is a group of flex columns </div> <div class="col"> Isn't that interesting? </div> </div> </div>包裹在img中并将span span

包裹起来

Fiddle demo

Stack snippet

＆＃13;

max-width: 250px

＆＃13;

.container {
  display: block;
  background-color: #fff;
  padding-left: 30px;
  padding-right: 30px;
}
.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  margin-left: -30px;
  margin-right: -30px;
  padding: 15px 0 60px;
}
.col {
  border: 1px solid black;
  padding-left:30px;
  padding-right:30px;
  min-width: 0;
}
.col img { 
  max-width: 100%;
  max-height: 250px;
}
.col span { 
  max-width: 250px;
}

＆＃13;

Flexbox具有最大宽度和最大高度内容，仍然具有响应能力

1 个答案: