问题描述
以下是我的HTML代码：
Here's my code for HTML:
<!DOCTYPE html>
<html lang="en">
<head><link href="test.css" rel="stylesheet"></head>
<body>
<div class="outer">
<div class="inner">
<img src="test.png">
</div>
</div>
</body>
</html>
这里是CSS：
.outer {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
}
.inner {
width: auto;
margin: auto;
}
.inner > img {
width: auto;
max-width: 100%;
}
这是我在Bootstrap的modal.js中使用的代码的简化点击缩略图后显示图片。
This is a simplification of the code I am using inside Bootstrap's modal.js to display images after clicking on thumbnails.
我想要的是图片以视口为中心，以响应的方式 - 即图片显示在
What I want is for an image to be centered on the viewport, in a responsive way - that is, the image is displayed in its true dimensions unless the viewport is smaller than one of the dimensions, in which case, the image should resize accordingly.
outer 除非视口小于其中一个尺寸，否则为真实尺寸。 $ c> div往往具有视口的精确尺寸 - 效果很好。
The outer div tends to have the exact dimensions of the viewport - which works well.
图片给出 width：auto; max-width：100％; ，它对视口的宽度非常敏感，但不响应视口的高度。添加 max-height：100％; 不会做任何事情。
The image is given width: auto; max-width: 100%; which is very responsive to the width of the viewport, but doesn't respond to the height of the viewport. Adding a max-height: 100%; doesn't do anything.
不幸的是， code> inner div拥有视口的左侧，除非给定一个特定的宽度。
Unfortunately, as it stands the inner div hugs the left of the viewport unless given a specific width.
如果我将 display：table 添加到 .inner ，那么div将居中，
If I add display: table to the .inner, then the div centers, but no longer responds to changes in viewport width.
因此，如何使 inner div居中，并响应视口宽度的变化。视口的宽度和高度不会修剪或改变图像的宽高比，或者延伸到图像的原始尺寸之外？
So, how do I get the inner div to be centered and responsive to the width and height of the viewport in a way that never crops or alters the aspect ratio of the image or stretches it beyond the original dimensions of the image?
这是不可能的只有CSS和HTML（和Bootstrap）或将需要一些自定义JS？我不知道足够的JS来自信地编码这，这就是为什么我希望有一些甜蜜的CSS技巧，允许这种矛盾的行为有条件的视口大小。
Is this impossible using only CSS and HTML (and Bootstrap) or will it require some custom JS? I don't know enough JS to confidently code this on my own, which is why I am hoping there is some sweet CSS trick that allows for this contradictory behaviour conditional on viewport size.
标记Twitter的Bootstrap，因为我将在Bootstrap的上下文中使用它，所以欢迎使用Bootstraps JS插件的任何解决方案。
Tagging Twitter's Bootstrap because I will be using this in context of Bootstrap so any solution that uses Bootstraps JS plugins is welcome.
：为了更清楚，我需要将 inner 中心，而不仅仅是 inner 中的图片。
To be more clear, I need to center inner not just the image within inner.
推荐答案
更改如下代码
.outer {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
text-align:center;
}
这篇关于如何中心具有未指定宽度的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！