HTML - отображать изображение как можно большего размера, сохраняя соотношение сторон - PullRequest
Новая
       15

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

19 голосов
/ 02 октября 2008

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

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

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

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

<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>

Ответы [ 8 ]

14 голосов
/ 02 октября 2008

Вот быстрая функция, которая отрегулирует высоту или ширину до 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>
6 голосов
/ 02 октября 2008

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

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

<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>
5 голосов
/ 19 октября 2012

Это также можно сделать с помощью чистого 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 .
4 голосов
/ 02 октября 2008

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

4 голосов
/ 02 октября 2008

Попробуйте это: 

<img src="whatever.jpeg" width="100%" height="auto" />
0 голосов
/ 15 января 2018

Самый простой способ сделать это (если вам не нужна поддержка IE) - установить для свойства object-fit CSS значение contain: 

img { object-fit: contain; }

Смотри также:

0 голосов
/ 18 августа 2012

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

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

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

0 голосов
/ 02 октября 2008

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

Это само ИЗОБРАЖЕНИЕ, а не тег.

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...