HTML - отображает изображение как можно больше при сохранении соотношения сторон
Чтобы меньше информации было точнее. Поэтому я оставляю только шаблон:
let sum=0
for f in __PATTERN__
do
value=__extract__from "$f" # any functionality ...
let sum+=value
done
printf "summary: %u\n" $sum
5 ответов
Вот быстрая функция, которая будет регулировать высоту или ширину к 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>
Для этого 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;
Как в стороне, это было бы намного более легкой задачей на стороне сервера вещей. На сервере Вы могли буквально изменить размер изображения, это получает итог, по которому текут, он браузер.
Попробуйте это:
<img src="whatever.jpeg" width="100%" height="auto" />
Для осуществления контрейлерных перевозок на Franci Penov да, Вы просто хотите установить одного из них. Если у Вас есть широкое изображение, Вы хотите установить ширину на высоту отпуска и 100%. Если у Вас есть длинное изображение, Вы хотите установить высоту на ширину отпуска и 100%.
Вы не обязательно хотите простираться в определенном направлении, на основе которого больше. Например, у меня есть широкоэкранный монитор, поэтому даже если это - более широкое изображение, чем это высоко, расширение его слева направо может все еще вырезать верхние края и базовые края.
необходимо вычислить отношение между шириной окна и высотой и шириной изображения и высотой. Меньший является Вашей осью управления - другой, зависит. Это верно, даже если обе оси больше, чем соответствующая длина окна.
<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>