How to adapt to 49% wide 200px high containers in mini program carousel pictures?

Mini Program Carousel Picture Adaptive Problem: The Perfect Solution for 49% Width 200px High Container

Many mini program developers face the challenge of image adaptation. This article will solve a common problem: how to achieve a 100% adaptive container with a width of 49% and a height of 200px, and a height of 100% adaptive container, height adaptive, and without using mode="widthfix" attribute.

Problem: A fixed-size container (49% wide, 200px high) needs to accommodate a carousel picture. The picture needs to be completely filled with the container width and the height is adapted to the scale of the picture. mode="widthfix" is not available due to certain restrictions.

Solution: Cleverly use CSS background image

The best solution is to take advantage of the CSS background image features. Set the carousel picture to the background picture of the container. Through background-size: cover; attribute, the picture will completely cover the container and automatically scale according to the image proportion, achieving 100% width adaptation and highly adaptable. background-position: center center; Make sure the image is displayed in the center. This method effectively avoids the width and height adaptive conflict caused by direct use of image tags.

Example: Assume that the container class is container , the image path is image.jpg , and the CSS code is as follows:

 .container {
  width: 49%;
  height: 200px;
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center center;
}

This method can perfectly solve the adaptive problem of applet images in fixed-size containers without JavaScript code, providing an efficient and concise solution.

The above is the detailed content of How to adapt to 49% wide 200px high containers in mini program carousel pictures?. For more information, please follow other related articles on the PHP Chinese website!