CSS调整图像以适合于容器

我想，以适应图像的容器具有不同的图像大小是这样的：CSS调整图像以适合于容器

例子：

1.在更大尺寸的容器全尺寸。

2.中间与水平尺寸的容器。

3.与垂直尺寸的容器中。

退房从这个link

来源

2016-01-21 Butter Toast

请在jsfiddle或snippet中提供您的代码。 –

不确定是否垃圾邮件或实际上是一个编程问题，因为没有提供代码... –

你有一个点人@GusstavvGil，但是我发布了答案 –

由于高塔姆说，你需要使用

max-height:100%; 
max-width: 100%;

所以，你可以定义一个类的容器

.container 
{ 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    border:1px solid black; 
    background-color: #ffffff; 
    width: 50px; 
    height: 50px; 
}

而且一类图像

.maxsize 
{ 
    max-height:100%; 
    max-width: 100%; 
}

的display:flex;属性使容器更易于配置，因此您可以更快地对内容进行居中。您可以删除border属性，只是为了更容易查看容器边缘。希望它有帮助。

Updated jsfiddle

来源

2016-01-21 08:29:14

第一幅图像可以放大？ –

使用'：first-child' @ButterToast –

不知道你是什么意思。你可以将容器制作成任意大小（我已经放了50px以便于查看）。图像将相应地适合（保持纵横比）。如果大小是一个正方形，并且图像是正方形，那么它将完全适合。如果图像是矩形，那么它将适合最大的轴。 –

一个例子只需设置父容器上这个属性。

background-size : contain; 
background-repeat: no-repeat;

这告诉浏览器确保图像不超过父容器的大小。

来源

2016-01-21 07:35:50 Robert

我试过你的代码，你能帮我修好吗？ [jsfiddle]（https://jsfiddle.net/w7y26ft5/1/） –

当然，你需要记住一些小事情。其一，为了使图像能够基于父容器进行自动缩放，父容器需要具有明确的宽度和高度。我更新小提琴运行，你可以调整父容器的尺寸为任何你喜欢的。 https://jsfiddle.net/svp9Lp63/1/ – Robert

这是很容易做到

只图像对准中心和

使用 max-height:100% 和 max-width:100%

来源

2016-01-21 07:36:17

正如罗伯特提到：

background-size : contain; 
background-repeat: no-repeat;

不过可以肯定的添加：

background-position: center;

然后它将保持在容器的边界内并被居中。

来源

2016-01-21 07:41:03 Awin

这假定你使用的是背景图片而不是img标签，那么这将是一个不同的故事。 – Awin

如果这有帮助，请注册或标记为正确答案。这将有助于我的计算器声誉。祝你好运！ – Awin

CSS调整图像以适合于容器

回答

相关问题