CSS图像约束/调整大小

Question

我使用html / css制作了一个tumblr主题，它允许用户输入自己的图像，这些图像将显示在主题的侧边栏中。

我不确定如何将图像限制在屏幕上的某个区域/大小。我现在拥有的图像的CSS（可能是过度的）

.sidebaricon {
    margin-left: auto;
    margin-right: auto;    
    width: auto;
    height: auto;
    max-width: 500px;
    max-height: 500px;
}

但是当我上传不同尺寸的照片时，他们不会限制到相同的尺寸。我希望所有上传的图像都限制在500x500px的方形区域。 请帮忙！谢谢。

Answer 1

据我了解，您尝试上传图片并将其设置为最大宽度。您的代码中存在一些错误以及一些可能令人困惑的事情（例如：您的侧边栏及其图像具有相同的类别）。

首先，您需要为侧边栏设置宽度：

.sidebar  { /* I renamed the container to avoid any misunderstanding */
    width: 30%; /* or whatever */
    max-width: 500px;
}

然后，侧边栏中的图片：

    .sidebar .sidebaricon { /* this should be your img */
        max-width: 100%;
        height: auto;
    }

逻辑很简单：你让图像填充其父宽度的100％，所以你只需要使用父宽度。

许多CSS框架使用相同的技术来提供快速制作所有图像的方法＆＃34;响应＆＃34;，如下所示：

img {
   max-width: 100%;
   height: auto;
}

同样，这意味着：文档正文中的所有图像的最大宽度其容器的100％。我添加了自动高度，因为一些旧的IE默认不保持比率。