| |
|
|
| | Визуальный редактор при размещении графики выдает код вот такого вида:
<img border="0" src="/709.jpg" width="72" height="90">
|
Здесь ширина и высота заданы в пикселях и это не подходит для резиновой верстки, для которой требуется указание ширины в процентах и высота auto.
Вот этот замечательный скрипт нивелирует введенные значения размеров в пикселях:
<script type="text/javascript">
$(document).ready(function(){
$('img').removeAttr('width').removeAttr('height');
});
</script>
|
Однако, это не решило проблемы в полном объеме.
Можно ли этот скрипт доработать таким образом, чтобы численное значение ширины в пикселях воспринималось браузером как процентное, а высота как auto ?
То есть, в виде:
<img border="0" src="/709.jpg" style="width:10%;height:auto;">
|
| |
| |
|
|
| |
|
|
| |
для: Владимир55
(23.12.2013 в 22:19)
| | | во всех без исключения браузерах предустановлен механизм подгонки габаритов изображений для тега <IMG>
это означает, что если указать только один размер тегу <IMG> (неважно - высота это будет, или ширина; и неважно - в каких именно единицах измерения это будет указано), то второй размер автоматически подгонится пропорционально фактическим размерам картинки, т.е. так, чтобы изображение не исказилось
т.е. вполне достаточным в вашем случае будет написать
<img border="0" src="/709.jpg" style="width: 10%">
|
второй размер - height - сам, автоматически, выставится как нужный вам auto
и никаких скриптов для этого не надо | |
| |
|
|
| |
|
|
| |
для: яса1
(24.12.2013 в 10:57)
| | | С подгонкой размера графики понятно.
Но здесь-то проблема не только в этом - даже один параметр (ширину) браузер получает в пикселях, а требуется в процентах. Так что без скрипта не обойтись. И этот скрипт должен превратить численное значение ширины в количество процентов.
Реализуемо ли это вообще, в принципе? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(24.12.2013 в 14:13)
| | | повторю мною выше написанное, если сразу не поняли: "неважно - высота это будет, или ширина; и неважно - в каких именно единицах измерения это будет указано" | |
| |
|
|
| |
|
|
| |
для: яса1
(24.12.2013 в 16:23)
| | | Да я это давно понял и на практике проверил.
Только сейчас речь совершенно не об этом. Свою проблему я сформулировал - она иная, и Ваше пояснение её не решает. | |
| |
|
|
|
| |
|
|
| |
для: Deed
(24.12.2013 в 21:02)
| | | Спасибо!
Правда, в Вашем случае решается несколько иная задача. Честно говоря, я эту задачу не понял. Вроде бы, изображения подгоняются под 95% экрана. Но вот здесь http://wowa55.pz9.ru/rubber2.html я установил 20%, а результат тот же...
К тому же, Вы используете код графики в виде
<img src="http://img156.imageshack.us/img156/6172/mdbwq1.jpg" data-width="" />
|
А у меня редактор дает только такой код
<img border="0" src="/709.jpg" width="72" height="90">
|
и надо, чтобы "72" из данного примера давало для этой картинки 72% ширины родительского блока, в котором файл находится (и высота авто).
То есть, если администратор задаст меньший размер картинке, то эта картинка (именно эта и только эта) должна стать меньше.
Например,
<img border="0" src="/709.jpg" width="25" height="90">
|
В этом случае данная картинка должна быть шириной 25% ширины родительского блока.
А другая картинка
<img border="0" src="/222.jpg" width="55" height="90">
|
должна иметь ширину 55%.
А третья картинка
<img border="0" src="/333.jpg" width="80" height="90">
|
должна иметь ширину 80% ширины родительского блока.
Картинок может быть много, их количество и имена заранее неизвестны, и для каждой ее ширина в пикселях должна интерпретироваться как её ширина в процентах от ширины родительского блока.
(Как я начинаю догадываться, задача не имеет решения на уровне скрипта или же оно слишком сложное. Если это так, то я поищу другой путь). | |
| |
|
|
| |
|
|
| |
для: Владимир55
(24.12.2013 в 22:06)
| | | Я понял.
Накидайте в какую-нибудь папку на вашем сервере реальные картинки, и создайте штмл с реально нужными вам видсами.
Это проблема пустяковая. И, чтобы не толочь воду, я напишу вам скриптец и дам ссылку здесь. | |
| |
|
|
| |
|
|
| |
для: Владимир55
(24.12.2013 в 22:06)
| | |
<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('img').each(function(){
$(this).attr('width', $(this).attr('width')+'%');
$(this).removeAttr('height');
});
});
</script></head><body>
<img border="0" src="/709.jpg" width="72" height="90">
<img border="0" src="/709.jpg" width="25" height="90">
<img border="0" src="/222.jpg" width="55" height="90">
<img border="0" src="/333.jpg" width="80" height="90">
</body></html>
|
Вы это имеете ввиду?
Хотя такую мелочь можно и без jQuery:
<html><head></head><body>
<img border="1" src="/709.jpg" width="72" height="90">
<img border="1" src="/709.jpg" width="25" height="90">
<img border="1" src="/222.jpg" width="55" height="90">
<img border="1" src="/333.jpg" width="80" height="90">
<script type="text/javascript">
var img = document.getElementsByTagName('img');
for(i=0; i<img.length; i++){
img[i].setAttribute('width', img[i].width+'%');
img[i].removeAttribute('height');
}
</script></body></html>
|
| |
| |
|
|
| |
|
|
| |
для: Sfinks
(25.12.2013 в 09:20)
| | | или ещё короче:
for (var s = document.images, j = 0, J = s.length; j < J; j++)
with (s [j].style) width = s [j].width + '%', height = 'auto';
|
| |
| |
|
|
| |
|
|
| |
для: Sfinks
(25.12.2013 в 09:20)
| | | Да, я имел в виду именно это.
Нормально работает, спасибо!
Тем более удобно, что jquery.min.js этой же версии уже используется на странице! | |
| |
|
|
| |
|
|
| |
для: Sfinks
(25.12.2013 в 09:20)
| | | Внутри блока, вроде бы, тоже нормально работает - http://wowa55.pz9.ru/1-68.html.
Конфликт только с padding, который при 100% ширине выталкивает картинку из блока.
Нельзя ли в скрипте установить лимит ширины 95% ? Что бы все, что больше этой величины, принималось равной 95%.
(Кстати, это особенно важно с учетом того, что по умолчанию визуальный редактор прописывает реальную ширину в пикселях, которая, как правило, намного больше 100. То есть, по умолчанию картинка вылетает за экран. А если установить лимит, то по умолчанию картинка будет в размер того блока, в который её вставляют). | |
| |
|
|
| |
|
|
| |
для: Владимир55
(28.12.2013 в 13:10)
| | | замените
img[i].setAttribute('width', img[i].width+'%');
|
на
img[i].setAttribute('width', parseInt(img[i].width)>95 ? '95%' : img[i].width+'%');
|
| |
| |
|
|
| |
|
|
| |
для: Sfinks
(28.12.2013 в 15:36)
| | | Мы используем Ваш первый вариант - с jquery. Там это как сделать? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(28.12.2013 в 18:34)
| | | :) | |
| |
|
|
| |
|
|
| |
для: btr
(28.12.2013 в 19:22)
| | | Нафига писать такие сообщения, btr ? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(28.12.2013 в 18:34)
| | | найти первый фрагмент и заменить на второй | |
| |
|
|
| |
|
|
| |
для: Sfinks
(28.12.2013 в 19:49)
| | | Сорри, я ничего не понимаю...
Ниже приведен полный код тестовой страницы http://wowa55.pz9.ru/1-68.html. Что конкретно в его скрипте надо изменить и как?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Варианты верстки</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('.dva img').each(function(){
$(this).attr('width', $(this).attr('width')+'%');
$(this).removeAttr('height');
});
});
</script>
<style>
.dva {font-size:50px; width:100%; background-color:#FC6;}
.dva img {padding:1%;}
</style>
</head>
<body><!-- NOAD: wowa55.pz9.ru/1-68.html -->
Реальный размер 250х90 <br>
<img border="0" src="banner/221.gif" width="250" height="190"><br>
Обработано скриптом <br>
<div class="dva">
<img border="0" src="banner/221.gif" width="100" height="90"> 100 %<br>
<img border="0" src="banner/221.gif" width="50" height="90"> 50 %<br>
<img border="0" src="banner/221.gif" width="20" height="90"> 20 %<br>
</div>
<br/> <br/>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Владимир55
(28.12.2013 в 20:46)
| | | http://jsbin.com/ikEcapOr/1/edit?html,css,output
1. "Корявый" линк на jquery.
2. Нет вызова заданной функции. | |
| |
|
|
| |
|
|
| |
для: Deed
(28.12.2013 в 23:00)
| | | Спасибо!
overflow:hidden, конечно же, решает проблему padding, так что за пределы блока картинка не выходит. Но все же, после того, как будет введена картинка, использованная в примере, ширина которой 250рх, она смотрится не очень красиво (см. http://wowa55.pz9.ru/4-68.html). Админ её поправит, но было бы совсем хорошо, если бы скрипт всё же имел лимит ширины 95-98%.
Это возможно?
======================
Пользуясь случаем, хочется задать еще один вопрос относительно самой методики верстки.
Вот Вы использовали
$('div.dva>img').each(function(){
|
и
Почему именно так?
Ведь если оставить
$('.dva img').each(function(){
|
и
то всё работает точно также (см. http://wowa55.pz9.ru/5-68.html )
(P.S. В папке banner есть несколько графических файлов). | |
| |
|
|
| |
|
|
| |
для: Владимир55
(29.12.2013 в 01:20)
| | | Привычка. Так аккуратнее. Так ЭВМ ищет только дочерние картинки в "div.dva", значит проигнорирует все остальное. То есть другие теги в этом диве, если они будут, останутся без внимания. | |
| |
|
|
| |
|
|
| |
для: Deed
(29.12.2013 в 10:55)
| | | С методикой ясно, спасибо за разъяснение!
А что относительно установления в скрипте лимита ширины? Это осуществить не представляется возможным? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(29.12.2013 в 11:24)
| | | Это нетрудно. Приду - помогу. | |
| |
|
|
| |
|
|
| |
для: Владимир55
(28.12.2013 в 20:46)
| | | Да, я не в тот фрагмент посмотрел. Надо:
$(this).attr('width', $(this).attr('width')+'%');
|
заменить на:
$(this).attr('width', parseInt($(this).attr('width'))>95 ? '95%' : $(this).attr('width')+'%');
|
| |
| |
|
|
| |
|
|
| |
для: Sfinks
(30.12.2013 в 09:02)
| | | Отлично получилось, спасибо! | |
| |
|
|
