HTML - отображение изображения как можно большего размера при сохранении соотношения сторон

Я хотел бы иметь HTML-страницу, которая отображает одно изображение PNG или JPEG. Я хочу, чтобы изображение занимало весь экран, но когда я это делаю:

<img src="whatever.jpeg" width="100%" height="100%" />

Он просто растягивает изображение и искажает соотношение сторон. Как это решить, чтобы изображение имело правильное соотношение сторон при масштабировании до максимального размера?

Решение, размещенное Wayne почти, работает, за исключением случая, когда у вас высокое изображение и широкое окно. Этот код - небольшая модификация его кода, который делает то, что я хочу:

<html>
<head>
<script>
function resizeToMax(id){
    myImage = new Image() 
    var img = document.getElementById(id);
    myImage.src = img.src; 
    if(myImage.width / document.body.clientWidth > myImage.height / document.body.clientHeight){
        img.style.width = "100%";
    } else {
        img.style.height = "100%";
    }
}
</script>
</head>
<body>
<img id="image" src="test.gif" onload="resizeToMax(this.id)">
</body>
</html>

Ответы

Ответ 1

Здесь быстрая функция, которая будет регулировать высоту или ширину до 100% в зависимости от того, что больше. Протестировано в FF3, IE7 и Chrome

<html>
<head>
<script>
function resizeToMax(id){
    myImage = new Image() 
    var img = document.getElementById(id);
    myImage.src = img.src; 
    if(myImage.width > myImage.height){
        img.style.width = "100%";
    } else {
        img.style.height = "100%";
    }
}
</script>
</head>
<body>
<img id="image" src="test.gif" onload="resizeToMax(this.id)">
</body>
</html>

Ответ 2

Вы не обязательно хотите растягиваться в определенном направлении, на основе которого больше. Например, у меня есть широкоэкранный монитор, поэтому даже если он имеет более широкое изображение, чем высокое, растяжение его влево-вправо может по-прежнему зажимать верхний и нижний края.

Вам нужно рассчитать соотношение между шириной и высотой окна и шириной и высотой изображения. Меньшая - ваша контрольная ось - другая зависит. Это верно, даже если обе оси больше соответствующей длины окна.

<script type="text/javascript">
// <![CDATA[
function resizeToMax (id) {
    var img = document.getElementById(id);
    myImage = new Image();
    myImage.src = img.src;
    if (window.innerWidth / myImage.width < window.innerHeight / myImage.height) {
        img.style.width = "100%";
    } else {
        img.style.height = "100%";
    }
}
// ]]>
</script>

Ответ 3

Попробуйте следующее:

<img src="whatever.jpeg" width="100%" height="auto" />

Ответ 4

Также можно сделать это с помощью чистого CSS, используя фоновое изображение и свойство background-size:contain:

<head>
<style>
#bigPicture
{
    width:100%;
    height:100%;
    background:url(http://upload.wikimedia.org/wikipedia/commons/4/44/CatLolCatExample.jpg);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}
</style>
</head>

<body style="margin:0px">
    <div id="bigPicture">
    </div>
</body>

Это позволяет автоматически обновлять, если контейнер изменяет пропорции, без необходимости реагировать на события изменения размера (методы Javascript, как это закодировано здесь, могут привести к отключению изображения при изменении размера браузера). Метод <embed> имеет такое же преимущество, но CSS намного более плавный и не имеет проблем с предупреждениями безопасности.

Предостережения:

  • Элемент <img> не содержит контекстного меню и не содержит текстового текста.
  • Поддержка IE для background-size:contain - только 9+, и я даже не мог заставить это работать в IE9 (по неизвестным причинам).
  • Кажется, что все свойства background-* должны быть указаны в том же блоке CSS, что и фоновое изображение, поэтому для нескольких изображений на одной странице каждый должен иметь свои собственные contain, no-repeat и center.

Ответ 5

Чтобы контрейлеровать на Францию ​​Пенова, да, вы просто хотите установить один из них. Если у вас широкая картинка, вы хотите установить ширину на 100% и оставить высоту. Если у вас длинное изображение, вы хотите установить высоту на 100% и оставить ширину.

Ответ 6

Для этого JavaScript - ваш друг. То, что вы хотите сделать, - это загружать страницы, ходить через dom, а для каждого изображения (или, наоборот, передавать функцию идентификатор изображения, если это всего лишь одно изображение), проверьте, является ли какой атрибут изображения больше, его высота или ширина.

Это сам IMAGE, а не тег.

Как только вы это получили, установите соответствующую высоту/ширину тега на 100%, а другую - на авто

какой-нибудь полезный код - все от верхней части головы, поэтому ваш пробег может варьироваться в зависимости от синтаксиса.

var imgTag = $('myImage'); 
var imgPath = imgTag.src; 
var img = new Image(); 
img.src = imgPath; 
var mywidth = img.width; 
var myheight = img.height;

В стороне это было бы намного проще на стороне сервера. На сервере вы можете буквально изменить размер изображения, которое будет передаваться по всему браузеру.

Ответ 7

Протестировано в IE и Firefox, плюс первая строка будет центральным образом:

<div align="center">
<embed src="image.gif" height="100%">

... также отлично подходит для сохранения пропорций с любым другим значением размера, поэтому не более раздражающие вычисления =)