Html 如何将图像放在中间较小的 div 中?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8639042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 12:10:22  来源:igfitidea点击:

How to put an image inside of a smaller div in the middle?

htmlcss

提问by Jakub

Possible Duplicate:
Aligning image to center inside a smaller div

可能的重复:
将图像与较小 div 内的中心对齐

I have a problem which points to CSS 3. Please see the part of my HTML code:

我有一个指向 CSS 3 的问题。请查看我的 HTML 代码部分:

<div id="main" style="width: 320px; height: 400px;">
   <img src="test.jpg" height="400" />
</div>

I don't know the real sizes of the test.jpg file (width can be different - the file is dynamic). I want to have the image in the middle of id="main" (I don't care, that the left & right part of the image will be out of range - it's even better). How can I do that ?

我不知道 test.jpg 文件的实际大小(宽度可以不同 - 文件是动态的)。我想在 id="main" 中间放置图像(我不在乎,图像的左右部分会超出范围 - 甚至更好)。我怎样才能做到这一点 ?

回答by DOK

As long as you specify any width, you can center by adding margin:auto;. This isn't CSS3.

只要指定 any width,就可以通过添加margin:auto;. 这不是 CSS3。

<img src="test.jpg" style="margin:auto; width:200px;display:block" />

回答by Deept Raghav

this will do the work

这将完成工作

<div id="main" style="width: 320px; height: 400px;background-position:center;background-repeat:no-repeat;background-image:url('test.jpg')">

</div>