Ввод субтитров [закрытого] изображения
Лучший способ сделать это - получить общий продукт и использовать map() для деления total на каждое значение
function getProducts(arr){
let total = arr.reduce((ac,a) => ac * a,1);
return arr.map(x => x === 0 ? total : total/x);
}
console.log(getProducts([1, 7, 3, 4]))4 ответа
Существует несколько семантических способов разметки изображения и подписи к нему.
Старый школьный путь
Старый школьный метод заключается в использовании списков определений HTML, см. Подпись к изображению семантическим способом . (Существуют и другие хорошие учебники , демонстрирующие этот метод.)
<dl>
<dt><img src="foo.jpg" /></dt>
<dd>Foo</dd>
</dl>
Микроформат
Существует также микроформат фигуры , который применяется к любой регулярной разметке:
<div class="figure">
<img class="image" src="foo.jpeg" alt="" /><br/>
<small class="legend">Foo</small>
</div>
HTML5
И теперь HTML5 предоставляет чистый прямой метод для изображений с подписями через элементы и .
<figure>
<img src="foo.jpg" alt="">
<figcaption>Foo</figcaption>
</figure>
Я знаю, что видел несколько статей с хорошим кодом на www.alistapart.com - но вот один, чтобы начать вас: http://www.alistapart.com/articles/practicalcss/
Редактировать -
Хороший пример CSS на титрах при наведении изображения
Другие примеры: Подписи к изображениям на веб-страницах
Вот что я бы сделал
.img-container {position:relative;}
,img-container h4{position:absolute;bottom:0; left:0;height:Npx;line-height:20px; font-size:18px;}
.img-container img {margin-bottom:Npx;}
Если есть риск, что текст будет занимать более одной строки, вам нужно увеличить значение N, в противном случае достаточно будет 20px.
<div class="img-container">
<h4 class="caption">A picture of a dog</h4> //or h3, or h5 etc... - whichever is most appropriate given how you've used headings on your site
<img src,,,,>
</div>
Поместить подпись перед изображением в разметке и сделать ее заголовком - это, я думаю, настолько близко к тому, чтобы семантически сказать: "Это изображение ...".