Question

我试图建立一个信息卡，如果屏幕很大，你的图像左半部分和右边的文字就会填满，如果屏幕很小，你就会＃39 ; d顶部有图片，底部有文字。我可以通过添加position: absolute;top: 0;left: 0;bottom: 0;width: 40%和设置background-image: src;background-size: cover;然后在内容上设置margin-left: 40%来完成第一部分。但最终这使得像这样的结构很难适应屏幕尺寸而没有一些javascript。我想尽可能避免使用js，所以我在网上寻找解决方案，并找到了诸如使用flexbox和使用object-fit css属性的答案，但这些都没有真正奏效。这是我的代码：

＆＃13;

.signup-form-wrapper {
  display: flex;
  align-items: center;
  height: 400px;
  width: auto;
  border: 1px solid rgb(200, 200, 200);
  margin: 10px 0px;
}
.img-wrapper {
  height: 100%;
  width: 50%;
}
.img-wrapper img {
  display: block;
  max-width: 100%;
  height: auto;
}
.content-wrapper {
  display: inline-block;
  max-width: 60%;
  text-align: center;
  padding: 0px 14%;
}
body {
  height: 100%;
  width: 100%;
}

＆＃13;

<body>
  <div class='signup-form-wrapper'>
    <div class='img-wrapper'>
      <img src='http://www.parkermeridien.com/media/pool_fashion_f.jpg' />
    </div>
    <div class='content-wrapper'>
      <p>Hello, World!</p>
    </div>
  </div>
</body>

＆＃13;

Answer 1

你走在正确的轨道上！

媒体查询（您尝试过）是在没有JavaScript的情况下执行此操作的正确方法。我回过头来使用background-image而不是img - 这是一个简单的方法，使用浮动来保持元素并排，并使用媒体查询（在底部）（CSS）关闭浮动所以元素堆栈。

我还为所有元素添加了box-sizing: border-box;以防止填充/边框修改元素的大小（这是一种很好的做法）。

＆＃13;

body {
  height: 100%;
  width: 100%;
}
* {
  box-sizing: border-box;
}
.signup-form-wrapper {
  height: 350px;
  border: 1px solid rgb(200, 200, 200);
  margin: 10px 0px;
}
.img-wrapper {
  height: 100%;
  width: 40%;
  float: left;
  background-image: url('http://www.parkermeridien.com/media/pool_fashion_f.jpg');
  background-size: cover;
}
.content-wrapper {
  float: left;
  width: 60%;
  text-align: center;
  padding: 0px 14%;
}
@media (max-width: 768px) {
  .img-wrapper,
  .content-wrapper {
    width: auto;
    float: none;
    height: 175px;
  }
}

＆＃13;

<body>
  <div class='signup-form-wrapper'>
    <div class='img-wrapper'>
    </div>
    <div class='content-wrapper'>
      <p>Hello, World!</p>
    </div>
  </div>
</body>

＆＃13;

使用响应式图像构建信息卡

1 个答案: