I want to make a container of fixed size th开发者_JS百科at will inside have an image (of unknown size). Then I want to make the image fit the container and be centered in it (both horizontally and vertically). What I came up with is:
<!DOCTYPE html>
<html>
<body>
<div style="width: 500px; height: 375px; display: table-cell;
vertical-align: middle">
<img src="./Slideshow_files/Charles Bridge In Prague.jpg"
style="max-width: 500px; max-height: 375px">
</div>
</body>
</html>
For some images it works fine. However this one (of precisely the size 500x375) makes the outer div's height few pixels higher than 375px at the bottom (5px in Chrome, 4px in Opera). Why is that??
EDIT: Just added demonstration here (and another one with display: table-row and display: table elements around, here). In both cases the red background should not be visible; in Chrome & Opera it is.
You can fix the problem by setting display: block or vertical-align: top (or bottom) on the img.
There are three different rendering modes:
- Quirks Mode
- Almost Standards Mode
- Standards Mode
Different doctypes trigger different rendering modes. See: http://hsivonen.iki.fi/doctype/
In Standards Mode (with a triggering doctype), the default vertical-align is baseline.
In Quirks Mode (without a doctype), the default vertical-align is bottom.
This page explains it well: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论