Чтобы размер шрифта соответствовал его контейнеру, а не окно, см. функцию resizeFont()
, которую я поделил в этом вопросе (комбинация других ответов, большинство из которых уже связаны здесь).
Vanilla JS: Изменить размер шрифта - удивительный, чтобы соответствовать контейнеру
function resizeFont() {
var elements = document.getElementsByClassName('resize');
console.log(elements);
if (elements.length < 0) {
return;
}
_len = elements.length;
for (_i = 0; _i < _len; _i++) {
var el = elements[_i];
el.style.fontSize = "100%";
for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
el.style.fontSize = size + '%';
}
}
}
] Возможно, вы можете использовать vw / vh как резерв, поэтому вы динамически назначаете блоки em
или rem
с помощью javascript, гарантируя, что шрифты будут масштабироваться до окна, если javascript отключен.
Применить .resize
для всех элементов, содержащих текст, который вы хотите масштабировать.
Запустите функцию перед добавлением слушателя событий изменения размера окна. Затем любой текст, который не соответствует его контейнеру, будет уменьшен при загрузке страницы, а также при изменении размера.
ПРИМЕЧАНИЕ. Значение по умолчанию font-size
должно быть установлено как em
, rem
или %
для достижения правильных результатов ... и если стиль ваших элементов слишком сложный, браузер может упасть, если вы начнете отчаянно изменять размер окна.
По умолчанию изображение отображается inline, как буква.
Он сидит в той же строке, на которой сидят a, b, c и d.
Существует пространство ниже этой строки для descenders, которые вы найдете на таких буквах, как f, j, p и q.
Вы можете отрегулировать vertical-align
изображения, чтобы разместить его в другом месте (например, middle
) или изменить display
, чтобы он не был встроен.
Я просто добавил float:left
в div, и он работал
float:left
вызывает display:block
– Kevin Boucher
15 May 2015 в 20:53
Все, что вам нужно сделать, это назначить это свойство:
img {
display: block;
}
У изображений по умолчанию есть это свойство:
img {
display: inline;
}
Вы можете использовать несколько методов для этой проблемы, например
line-height
#wrapper { line-height: 0px; }
display: flex
#wrapper { display: flex; }
#wrapper { display: inline-flex; }
display:
block
, table
, flex
и inherit
#wrapper img { display: block; }
#wrapper img { display: table; }
#wrapper img { display: flex; }
#wrapper img { display: inherit; }
Можно также аннулировать высоту строки родителя:
#wrapper {
line-height: 0;
}
Все исправления: http://jsfiddle.net/FaPFv/
Другой вариант, предложенный здесь здесь , устанавливает стиль изображения как style="display: block;"
inline-block
, если вы все еще хотите, чтобы он отображался в строке как обычно.
– Ian
11 August 2014 в 02:26
Я нашел, что он отлично работает, используя display: block; на изображении и вертикально-выровнять: верх; на текст.
.imagebox {
width:200px;
float:left;
height:88px;
position:relative;
background-color: #999;
}
.container {
width:600px;
height:176px;
background-color: #666;
position:relative;
overflow:hidden;
}
.text {
color: #000;
font-size: 11px;
font-family: robotomeduim, sans-serif;
vertical-align:top;
}
.imagebox img{ display:block;}
<div class="container">
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
</div>
или вы можете отредактировать код a JS FIDDLE
Чтобы удалить зазор под изображением, вы можете:
vertical-align: bottom;
vertical-align: top;
или vertical-align: middle;
display:block;
См. следующий код для живой демонстрации:
#vAlign img {
vertical-align :bottom;
}
#block img{
display:block;
}
div {border: 1px solid red;width:100px;}
img {width:100px;}
<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
Разрыв или дополнительное пространство под изображением не является ошибкой или проблемой, это поведение по умолчанию. Основная причина заключается в том, что изображения заменяются элементами ( см. MDN и W3C ). Это позволяет им «действовать как изображение» и иметь собственные собственные размеры, соотношение сторон ... Браузеры вычисляют свое свойство отображения inline
, но они придают им особое поведение, которое приближает их к элементам inline-block
(так как вы
Это также означает, что:
[...] когда изображения используются во встроенном контексте форматирования с выравниванием по вертикали: базовая линия, нижняя часть изображения будет отображаться на базовой линии контейнера. ( source: MDN , focus mine )
Поскольку браузеры по умолчанию вычисляют свойство vertical-align для базовой линии, это значение по умолчанию поведение. На следующем изображении показано, где базовая линия находится по тексту:
[/g15]
Элементы, выровненные по базовой линии, должны содержать место для дескрипторов которые простираются ниже базовой линии (например,
j, p, g ...
), как вы можете видеть на приведенном выше изображении. В этой конфигурации нижняя часть изображения выравнивается по базовой линии, как вы можете видеть в этом примере:
div{border:1px solid red;} img{width:100px;height:auto;}
<div> <img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender </div>
Вот почему поведение по умолчанию тега
<img>
создает пробел в нижней части его контейнера и почему изменение свойства вертикального выравнивания или свойства отображения удаляет его, как в следующей демонстрации:
div {width: 100px;border: 1px solid red;} img {width: 100px;height: auto;} .block img{ display:block; } .bottom img{ vertical-align:bottom; }
<p>Default:</p> <div> <img src="http://i.imgur.com/RECDV24.jpg" /> </div> <p>With display:block;</p> <div class="block"> <img src="http://i.imgur.com/RECDV24.jpg" /> </div> <p>With vertical-align:bottom;</p> <div class="bottom"> <img src="http://i.imgur.com/RECDV24.jpg" /> </div>
line-height:0;
, но я не считаю это хорошим решением по сравнению с изменением свойств вертикального выравнивания или отображения
– web-tiki
22 January 2016 в 19:14
font-size:0
: они устанавливают размер шрифта минимальным размером в пользовательских настройках.
– Mr Lister
6 December 2017 в 18:12
middle
text-top
sub
super
на картинке неверна.
– xianshenglu
19 May 2018 в 02:10
line-height
. Установкаline-height
в нужный размер также позволит преодолеть нежелательные пробелы. – Kevin Boucher 15 May 2015 в 19:20