将固定高度/可变宽度容器内的可变宽度/高度图像居中 [英] Center a Variable Width/Height Image Inside Fixed Height/Variable Width Container

问题描述

目标：

固定高度 div $ c>和变量 width 。此封皮包含一张图片，其高度和宽度可变（可以是纵向或横向）。

图片应自动调整为 90％的包装器的宽度或最小。它也应该恒定地居中，水平和垂直。

通过文本进行描述有些困难，因此，当包装器有三种不同的宽度时，请参阅以下操作的屏幕截图：

>

现在有什么：

我使用的结构： div - > span - > div - > img / p>

我已经完成了大小调整。我有水平定位工作。

当图片开始缩小（受宽度限制）时， ，垂直定位不工作。这是因为内部 div 未调整大小。

代码

工作小提琴

HTML：

 < div class =selected-thumb> 
< span> 
< div> 
< img src =http://www.andymercer.net/wp-content/uploads/2014/01/tree26-300x225.jpg>< / img> 
< / div> 
< / span> 
< / div> 
 
< div class =selected-thumb> 
< span> 
< div> 
< img src =http://www.andymercer.net/wp-content/uploads/2014/03/ada_complete-300x171.png>< / img> 
< / div> 
< / span> 
< / div> 
 
< div class =selected-thumb> 
< span> 
< div> 
< img src =http://www.andymercer.net/wp-content/uploads/2013/12/employee_randy_fake-209x300.jpg>< / img> 
< / div> 
< / span> 
< / div> 
  

CSS：

 code> .selected-thumb {
 text-align：center; 
 background：＃c0c0c0; 
 border：＃a0a0a0 solid 1px; 
 margin：20px; 
 height：200px; 
} 
 
 .selected-thumb span {
 display：block; 
 height：200px; 
} 
 
 .selected-thumb span div {
 position：relative; 
 max-height：90％; 
 max-width：90％; 
 height：200px; 
 top：50％; 
 margin：0 auto; 
} 
 .selected-thumb span div img {
 width：auto; 
 height：auto; 
 max-height：100％; 
 max-width：100％; 
 position：relative; 
 top：-50％; 
} 
  

我需要：

我需要修复垂直放置，我遇到了墙。我尝试使用 display：table ，我已经尝试创建一个伪元素并使用 display：inline-block 。我找不到一种方法来完成我需要的。

解决方案

检查：

  html，body {height：100％;} 
 
 .selected-thumb {
 text-align：center; 
 background：＃c0c0c0; 
 border：＃a0a0a0 solid 1px; 
 margin：20px; 
 height：200px; 
 line-height：200px; 
} 
 
 .selected-thumb img {
 display：inline-block; 
 vertical-align：middle; 
 width：auto; 
 height：auto; 
 max-height：90％; 
 max-width：90％; 
} 
  

fiddle： http://jsfiddle.net/Ts4W9/2/

Goal:

A wrapper div that is fixed height and variable width. This wrapper contains a picture, which will have variable height and width (Could be portrait or landscape).

The picture should resize automatically to be either 90% of the wrapper's width or 90% of the wrapper's height, whichever is the smallest. It should also be constantly centered, both horizontally and vertically.

It's somewhat hard to describe via text, so see the manipulated screenshot below for an example of three possible images, when the wrapper is three different possible widths:

What I've Got Now:

I'm using a structure of: div->span->div->img.

I've got the sizing working completely. I've got the horizontal positioning working. I've got the vertical positioning working when the image is constrained by height.

When the image starts to resize smaller (constrained by width), the vertical positioning doesn't work. This is because the inner div isn't resizing.

Code

Working Fiddle

HTML:

<div class="selected-thumb">
    <span>
        <div>
           <img src="http://www.andymercer.net/wp-content/uploads/2014/01/tree26-300x225.jpg"></img> 
        </div>
    </span>
</div>

<div class="selected-thumb">
    <span>
        <div>
           <img src="http://www.andymercer.net/wp-content/uploads/2014/03/ada_complete-300x171.png"></img> 
        </div>
    </span>
</div>

<div class="selected-thumb">
    <span>
        <div>
           <img src="http://www.andymercer.net/wp-content/uploads/2013/12/employee_randy_fake-209x300.jpg"></img> 
        </div>
    </span>
</div>

CSS:

.selected-thumb {
    text-align: center;
    background: #c0c0c0;
    border: #a0a0a0 solid 1px;
    margin: 20px;
    height:200px;
}

.selected-thumb span {
    display:block;
    height:200px;
 }

.selected-thumb span div {
    position:relative;
    max-height:90%;
    max-width:90%;
    height:200px;
    top:50%;
    margin:0 auto;
}
.selected-thumb span div img {
    width:auto;
    height:auto;
    max-height:100%;
    max-width:100%;
    position:relative;
    top:-50%;
}

What I Need:

I need to fix the vertical placement, and I am running into a wall. I've tried using display:table, I've tried creating a pseudo-element and using display:inline-block. I can't find a way to accomplish what I need. All useful info will be upvoted regardless of which I select as correct.

解决方案

Check this:

html,body {height:100%;}

.selected-thumb {
    text-align: center;
    background: #c0c0c0;
    border: #a0a0a0 solid 1px;
    margin: 20px;
    height:200px;
    line-height: 200px;
}

.selected-thumb img {
    display: inline-block;
    vertical-align: middle;
    width:auto;
    height:auto;
    max-height:90%;
    max-width:90%;
}

fiddle: http://jsfiddle.net/Ts4W9/2/

这篇关于将固定高度/可变宽度容器内的可变宽度/高度图像居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！