Question

我试图用css中的矩形制作方形图像。他们也需要居中。

我在这里已经阅读了很多问题，但答案很好，总是使用不变大小的像素，而我需要tem为百分比，这样主题才能保持响应。

基本上我需要改变这个：

original

进入这个：

square

但如果屏幕更小：

small square

这里的主要问题是我无法预测屏幕尺寸。它专为移动设计，因此可以有所不同。

我正在考虑用php做css（它是wordpress的，所以它可能）。我在考虑像宽度：50％并使用宽度作为变量，但如果我将高度设置为等于宽度，它也将是50％。有没有办法，我不知道，将宽度转换为像素或其他什么？我没有想法，请帮助。

Answer 1

问题是，无法改变相对于宽度的高度。所以你的问题不是图像本身（使用溢出：隐藏或背景大小：封面会这样做）但是具有动态宽度然后相同高度的容器的方形大小。

一种非常奇怪的方法是使用方形图像（_blank.png，1px x 1px）并添加宽度：100％，因此高度将相同。

用css： div {width：30％;} img {width：100％;}

然后使用

将实际图片添加为背景图片

background-size：cover; background-position：center;

无论是表演还是美丽，但都有效。

Answer 2

只需使用img{max-width:100% !important; margin:0 auto !important;}，我认为它会对您有所帮助。

Answer 3

你试过这个吗？

img { width: 80%; }

确保你的css文件中没有img的高度。另外，请确保不要在html / php文件中设置类似height =“500px”width =“500px”的内容。

也要集中注意力

img { margin: auto; }

Answer 4

很好的照片;）

如果你想要一个你想要居中的图像 - 但是覆盖一个父元素，只使用CSS，那么你需要两个包装器：

这仅适用于宽幅图像。肖像图像只会在容器内居中。

<!DOCTYPE html>
<html>
    <head>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .outer-wrapper {
                position: relative;
                width: 200px;
                height: 200px;
                margin: 0 auto;
                overflow: hidden;
            }
            .inner-wrapper {
                position: relative;
                display: inline-block;
                right: -50%;
            }
            .inner-wrapper img {
                display: inline-block;
                position: relative;
                left: -50%;
            }
        </style>
    </head>
    <body>
        <div class="outer-wrapper">
            <div class="inner-wrapper">
                <img src="//placehold.it/400x200" alt="" />
            </div>
        </div>
    </body>
</html>

Answer 5

尝试为您的图片添加css。它不会破坏图像的像素/尺寸。

.imageClass img {
 width: 50%;
 height: auto;
}
.imageClass img {
 width: auto;
 height: 50%;
}

<img src="image_path" alt="" class="imageClass" />

css中心的方形图像，没有设置尺寸

5 个答案: