Question

过去几天我一直在研究这个问题，虽然已经找到了几个在静态布局中运行良好的解决方案，但我在响应式设计方面遇到了问题。

我们在主页上使用了一系列横幅图片，并试图让它们以较小的移动屏幕上的文字后面的图像为中心。我可以针对固定宽度解决这个问题，但我们需要做出响应。

以下是我的CSS代码的当前版本：

#mainSlideshow .item img {
    display: block;
    width: auto !important;
    max-width: none !important;
    height: 350px !important; 
    overflow: hidden;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform:  translateX(-50%);
-ms-transform:  translateX(-50%);
-o-transform:  translateX(-50%);
transform:  translateX(-50%);
}
#mainSlideshow .item .carouselImgHold {position: relative; }

挑战似乎是左移 - 现在，图像只是移动到img宽度的左边50％（毫不奇怪）。如何对CSS进行编程以使图像仅漂移在嵌套div标签中居中图像所需的量？

非常感谢提前。

Answer 1

如果你能给我们一个例子，那就太好了，但试试吧。 :)

我的建议是将图片设置为background-image而不是链接它。所以这看起来像：

#mainSlideshow .item{
  background-image:url("path-to-image/image.jpg");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

这样你就不会覆盖#mainSlideshow .item覆盖的图像。了解更多关于here的信息

Answer 2

我认为你可以做到这一点。

img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

或者

img {
    width: 50%
    left: 50%
}

Answer 3

如果IMG独立于其线上，您可以使用文本对齐和负边距。

http://codepen.io/anon/pen/PPpYzM

<div class="oversizedImage">
  <img src="http://lorempixel.com/1200/200"/>
</div>

try {
     Scanner reader = new Scanner(System.in);
     System.out.print("Enter file name with extension: ");
     File file = new File(reader.nextLine());

     reader = new Scanner(file);
     int counter = 1;
     while (reader.hasNextLine())
    {
      if (reader.equals(" ")){
      System.out.println();
    }else{
    String line = reader.nextLine();
    System.out.printf("%2d.", counter++); // Use printf to format
    System.out.println(line);
    }
    }
     reader.close();
    } catch (Exception ex){
    ex.printStackTrace();
      }
     }
    }

我们错过了您的HTML

，这只是猜测

在响应式div中居中超大图像

3 个答案: