Question

我的网页上有一个旋转木马，我试图让它在所有设备上做出响应。

我对3种不同设备的css声明，因此将高度定义为350px，255px，125px

/*
 * C++ utility to convert a PPM image from circular fisheye into rectilinear projection
 */
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <math.h>

void chomp(char *buffer)
{
  char *end = strchr(buffer, '\0');
  if (end > buffer && *(end - 1) == '\n') *(--end) = '\0';
  if (end > buffer && *(end - 1) == '\r') *(--end) = '\0';
}

int main(int argc, char *argv[])
{
  char linebuf[1024];

  // read PBM signature.
  if (!fgets(linebuf, sizeof(linebuf), stdin)) abort();
  chomp(linebuf);
  if (strcmp(linebuf, "P6") != 0) abort();

  // read dimensions.
  int width, height;
  while (1) {
    if (!fgets(linebuf, sizeof(linebuf), stdin)) abort();
    chomp(linebuf);
    if (linebuf[0] == '#') continue;
    if (sscanf(linebuf, "%d %d", &width, &height) != 2) abort();
    break;
  }
  if (width < 1 || height < 1) abort();

  // read bitdepth.
  int bitdepth;
  while (1) {
    if (!fgets(linebuf, sizeof(linebuf), stdin)) abort();
    chomp(linebuf);
    if (linebuf[0] == '#') continue;
    if (sscanf(linebuf, "%d", &bitdepth) != 1) abort();
    break;
  }
  if (bitdepth != 255) abort();

  // read pixel data.
  unsigned char *pixels[height];
  for (int i = 0; i < height; i++) {
    pixels[i] = new unsigned char[width * 3];
    if (fread(pixels[i], 3, width, stdin) != (size_t) width) abort();
  }


  // write out new image format.
  int midy = height / 2;
  int midx = width / 2;
  int maxmag = (midy > midx ? midy : midx);
  int circum = 2 * M_PI * maxmag;     // c = 2*pi*r
  printf("P6\n");
  printf("%d %d\n", circum, maxmag);
  printf("%d\n", bitdepth);


  char black[3] = {0,0,0};
  for (int y = 0; y < maxmag; y++) {
    for (int x = 0; x < circum; x++) {
      double theta = -1.0 * x / maxmag;       // -(x * 2.0 * M_PI / width);
      double mag = maxmag - y;                // y * 1.0 * maxmag / height;
      int targety = lrint(midy + mag * cos(theta));
      int targetx = lrint(midx + mag * sin(theta));
      if (targety < 0 || targety >= height || targetx < 0 || targetx >= width) {
        fwrite(black, 1, 3, stdout);
      } else {
        fwrite(&pixels[targety][targetx * 3], 1, 3, stdout);
      }
    }
  }

  return 0;
}

我的HTML代码：

.banner{
    max-width:100% !important;
    background:url(http://xxx/images/slide4.jpg) no-repeat;
    min-height:350px;
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    -ms-background-size:cover;
}
.banner{
    min-height:255px;
    max-width:100% !important;
    background:url(http://xxx/images/slide4.jpg) no-repeat;
}
.banner{
    min-height:125px;
    max-width:100% !important;
    background:url(http://xxx/images/slide4.jpg) no-repeat;
    }

请告知我如何使我的图像适合所有设备。在此先感谢。

Answer 1

您创建CSS的方式是级联到您列出的最后一条规则，因此您将始终获得125px的最小高度。您需要将规则拆分为媒体查询。 cli mov al, cr0 mov bl, 1 not bl and al, bl mov cr0, al sli 这样，当您的视口大小更改时，规则将应用于您提供的媒体“断点”。

Answer 2

宽度：当你在更宽的视野上观看时，100％会打破它。

以下是Bootstrap的img-responsive

max-width: 100%; 
display:block; 
height: auto;

这是你应该如何编写媒体查询

@media (min-width: 480px) { //for mobile devices 
  .banner {
    min-height: 125px
   }
}

@media (min-width: 768px) { // for tablets
  .banner {
    min-height: 255px
   }
}

在所有设备上响应图像

2 个答案: