Если вы знаете размер вашего изображения заранее (на стороне сервера), самый простой способ - сделать это при рендеринге HTML; используйте атрибут width и height вашего тега <img>, чтобы установить его размер, а margin-left и margin-top, чтобы центрировать его в контейнере. Это сделает его намного лучше для конечного пользователя, так как он не увидит мерцание экрана при изменении размера стороны javascript после загрузки изображения. На сегодняшний день это лучший способ сделать это.
Редактировать : как указано в комментариях, если вы используете решение на стороне сервера, вы можете по-прежнему использовать решение javascript в $ (window) .resize (), чтобы изображение оставалось по центру и правильный размер, если пользователь меняет размеры окна.
-
Однако, поскольку ваш вопрос касается javascript, вам нужно работать в два этапа; сначала уменьшите высоту и ширину изображения, чтобы оно не превышало размер окна, сохраняя соотношение, а затем во второй раз примените некоторое поле для его центрирования по горизонтали и вертикали.
Вот пример того, как вы могли бы достичь того, что вы хотите, обратите внимание, что этот код явно не оптимизирован и, вероятно, не должен использоваться как есть , я оставляю его в «многословном» виде чтобы было легче понять.
HTML:
<body>
<div id="main" style="margin: 0; padding: 0">
<img id="yourpic" src="http://domain.com/image.png" />
</div>
</body>
JS:
// we use the onLoad event so that your browser know the image dimension
$('#yourpic').load(function() {
// cache your objects
var $window = $(window);
var $this = $(this);
var tmp;
// if the image has too much width reduce it, keeping its ratio
if ($window.width() < this.width) {
tmp = [this.width, this.height];
$this.width($window.width());
$this.height(tmp[1] / (tmp[0] / this.width));
}
// same for its height
if ($window.height() < this.height) {
tmp = [this.height, this.width];
$this.height($window.height());
$this.width(tmp[1] / (tmp[0] / this.height));
}
// now center it horizontally
if ($window.width() > this.width) {
$this.css('margin-left', ($window.width() - this.width) / 2);
}
// and vertically
if ($window.height() > this.height) {
$this.css('margin-top', ($window.height() - this.height) / 2);
}
});
Вы можете увидеть это в примере здесь: http://jsfiddle.net/RPCjE/2/ (событие chome img.onload довольно глючное , поэтому, если вы используете этот браузер, вам может потребоваться обновить его без кеша).