求助：实现半屏图片半屏文本布局，区块高度占页面50%

Got it, let's build that split-screen layout you want! You need the .info block to take up 50% of the page height, with the image and text each occupying half the width. Here's a clean, modern solution using Flexbox (it's perfect for this kind of layout):

Step 1: Update Your CSS #

First, adjust your existing styles and add rules for the .info container to control the layout and height:

/* Ensure root elements take full viewport height */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.img-responsive {
  display: block;
  width: 100%; /* Force image to fill its container */
  height: 100%; /* Match the container's height */
  object-fit: cover; /* Keep image ratio without distortion */
}

.info {
  display: flex; /* Enable Flexbox layout */
  height: 50vh; /* Set container to 50% of viewport height */
  width: 100%; /* Full page width */
}

/* Style text block to center content and add padding */
.info p {
  flex: 1; /* Take up half the container width */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  margin: 0;
  box-sizing: border-box;
}

Step 2: Your Updated HTML #

Your existing HTML doesn't need major changes—just keep it as is, and the CSS will handle the layout:

<div class="info">
  <img src="media/images/pexels-photo-316465.jpeg" alt="Sample image" class="img-responsive">
  <p>sample text</p>
</div>

Key Explanations: #

• 50vh: This sets the .info container to exactly 50% of the viewport height (vh = viewport height).
• display: flex: Turns the .info container into a Flexbox parent, making its children (image and text) align side by side.
• flex: 1: Ensures both the image and text block take equal width (each gets 50% of the container's width).
• object-fit: cover: Prevents the image from stretching or squishing—it scales the image to fill the container while maintaining its aspect ratio, cropping excess if needed.

Bonus: Responsive Adjustment #

For smaller screens (like mobile), switch to a vertical layout (image above text) with this media query:

@media (max-width: 768px) {
  .info {
    flex-direction: column;
  }
  
  .img-responsive {
    height: 60%; /* Adjust image height for vertical layout */
  }
}

That's it! This will give you the exact split-screen layout you're looking for, with the entire block taking up half the page height.

内容的提问来源于stack exchange，提问作者Егор Голубев