用响应式图像构建信息卡(Building an info card with responsive image)

系统教程行业动态更新时间:2024-06-14 17:01:34

我试图建立一个信息卡，如果屏幕很大，你会有一张图像填充左侧的卡片和文本在右侧，如果屏幕很小，你会有图片在顶部和底部的文字。我能够通过添加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属性，但没有一个真正起作用。这是我的代码：

.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%;
} 
  <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> 
  
 
I'm trying to build an info card where if the screen is large, you'd have an image filling the left half of the card and text on the right and if the screen is small you'd have the picture on the top and text on the bottom. I was able to do the first part by adding position: absolute;top: 0;left: 0;bottom: 0;width: 40%, and the setting background-image: src;background-size: cover; and then setting margin-left: 40% on the content. But ultimately this makes it hard for a structure like this to adapt to screen sizes without some javascript. I'd like to avoid using js as much as possible for this so I looked for solutions online and came upon answers such as using a flexbox and using the object-fit css property, but none of those really worked. Here's my code: 
 
 
  
  .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%;
} 
  <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> 
  
 

                最满意答案
                
                    
                         你在正确的轨道上！  
 媒体查询（您尝试使用）是在没有JavaScript的情况下执行此操作的正确方法。 我回到使用background-image而不是img - 这是一个简单的方法，它使用浮动操作来保持元素并排排列，使用媒体查询（在CSS的底部）关闭浮动所以元素堆叠。  
 我还添加了box-sizing: border-box; 对于所有元素来防止填充/边界修改元素的大小（这是很好的做法）。  
 
 
  
  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;
  }
} 
  <body>
  <div class='signup-form-wrapper'>
    <div class='img-wrapper'>
    </div>
    <div class='content-wrapper'>
      <p>Hello, World!</p>
    </div>
  </div>
</body> 
  
 
You were on the right track!  
Media queries (which you experimented with) are the right way to do this without JavaScript. I went back to using a background-image instead of an img - here's a simple way to do this using floating to keep the elements side-by-side, with a media query (at the bottom of the CSS) that turns off the floating so the elements stack. 
I also added box-sizing: border-box; for all elements to prevent padding/borders from modifying the size of elements (which is good practice).  
 
 
  
  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;
  }
} 
  <body>
  <div class='signup-form-wrapper'>
    <div class='img-wrapper'>
    </div>
    <div class='content-wrapper'>
      <p>Hello, World!</p>
    </div>
  </div>
</body>