Блог

Главная - Вопросы по программированию - Подгонка изображения фиксированного размера со 100% шириной, но высотой с прокруткой

Подгонка изображения фиксированного размера со 100% шириной, но высотой с прокруткой

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть изображение, высота которого больше его ширины (соотношение может быть до 10 раз, а ширина также постоянно меняется)

Я сделал фиксированный td с шириной и высотой.

Я пытаюсь подогнать изображение под это, однако я хочу, чтобы оно отображало 100% его ширины, а высота была прокручиваемой. Соотношение сторон изображения не должно меняться при отображении.

Вот мой соответствующий код.

 <body onload="getResolution();">
function getResolution() {
var w40w = 0.40 * window.innerWidth ;
var w80h = 0.8 * window.innerHeight ;
document.getElementById('question_td_verb_p_rc').style.width = w40w 'px';
document.getElementById('question_td_verb_p_rc').style.height = w80h 'px';
document.getElementById('question_td_verb_p_rc').style.overflow = "auto";
}

<table class="questiontable" border="1">
        <tr>
            <td rowspan="6" id="question_td_verb_p_rc" style="padding-left:5px;">
            <a href='1.png' target="_blank"><img src="1.png"></a></td>
        </tr>

CSS

 table.questiontable
{
    width:80%;
}

Я пробовал много вещей, но ни одна из них не работала. Я получаю изображение, отображаемое как вписывающееся в td, или, если я устанавливаю ширину 100% и высоту автоматически, я получаю изображение, отображаемое по ширине 100%, но очень вытягивающее таблицу вниз.

Высота таблицы составляет 80% высоты экрана. (отображается правильно) Рассматриваемый td — это первый столбец таблицы и весь столбец. Во втором столбце таблицы содержится 6 строк.

Я предпочитаю решение javascript решению CSS, однако любое решение высоко ценится.

Надеюсь, я понятен, прошу прощения за мое плохое владение английским языком.

Спасибо.

Ответ №1:

Ячейка таблицы расширится, чтобы вместить содержимое.

Если вы обернете содержимое элемента td в div, высота и ширина которого составляют 100%, система будет знать, сколько места ему выделить, поскольку вы уже установили высоту и ширину его родительского элемента.

Если вы также установите overflow-y: auto, прокрутка будет выполняться только при необходимости.

 function getResolution() {
var w40w = 0.40 * window.innerWidth ;
var w80h = 0.8 * window.innerHeight ;
document.getElementById('question_td_verb_p_rc').style.width = w40w 'px';
document.getElementById('question_td_verb_p_rc').style.height = w80h 'px';
document.getElementById('question_td_verb_p_rc').style.overflow = "auto";
} 
 table.questiontable
{
    width:80%;
} 
 <body onload="getResolution();">

<table class="questiontable" border="1" style="table-layout: fixed;">
        <tr>
            <td rowspan="6" id="question_td_verb_p_rc" style="padding-left:5px;">
            <div style="height:100%; width:100%; overflow-y:auto;"><a href='1.png' target="_blank""><img src="https://ahweb.org.uk/gear.jpg" style="height:auto;width:100%;"></a></div></td>
        </tr>
</table>
</body>

Примечание: при использовании JS для вычисления размеров помните, что это также необходимо сделать при изменении размера (пользователь переводит свой телефон из альбомной ориентации в книжную или изменяет размеры окна на рабочем столе). Вам могут пригодиться единицы просмотра CSS vw и vh.

Комментарии:

1. Я не могу заставить это работать должным образом, после установки высоты 100% он пытается уместить изображение в <td>, уменьшив его, чтобы оно соответствовало высоте. Полоса прокрутки не видна, убирая высоту 100%, я получаю ширину 100%, но <td> опускается, открывая все изображение сразу без полосы прокрутки. Спасибо за идею <div>, я попробую еще немного поиграть с высотой <td> и <div> и обновить свои выводы. Спасибо.

2. Привет, ты хочешь сказать, что мой фрагмент не работает для вас? Для меня это было нормально. Какой браузер вы используете?

3. Это не сработало, как ожидалось. Я использую Chrome, и высота моего изображения в 10 раз больше его ширины. Он полностью вписывается в <td> . Я хочу, чтобы его ширина составляла 100%, а высота могла прокручиваться.

4. Хм, для меня это работает нормально. Можете ли вы поместить свое изображение в imgur или опубликовать его URL, чтобы я мог попробовать.

5. Работает идеально! 192.243.101.163/index.html (Это должно быть что-то с существующими контейнерами, потому что, когда я сделал эту тестовую страницу, удалив все лишнее, тогда она работала нормально)

Метки: