Настройка размера изображения в браузере

Я использую массив/цикл для получения изображений из настраиваемого поля, называемого галереей (Wordpress). Полученные изображения не изменяются, что означает, что они имеют максимальную ширину 150 пикселей или максимальную высоту 150 пикселей. Теперь мне интересно, как я могу автоматически позволить этим изображениям отрегулировать размер браузера. Chrome делает это отлично, но IE и FF этого не делают. Когда я устанавливаю img {width: 100%;}, выполняется изменение размера, но тогда размер самих изображений прикручивается, как вы можете себе представить.Настройка размера изображения в браузере

Есть ли другая возможность позволить изображениям автоматически настраиваться на размер браузера? Спасибо за лет!

источник

2013-02-27 RobbertT

Я предполагаю, что вы имеете в виду, что они пикселированы, а не конкретная проблема с их размером? – BenM

Эй, у меня есть изображения в таблице с разной высотой и шириной, поэтому я не могу установить процент для изображений, поскольку они все различаются. Однако, только когда я устанавливаю процент изображений, которые они настраивают, когда я изменяю размер моего браузера. Как я не могу использовать процент, есть ли другой способ сделать их подходящими для моего браузера? – RobbertT

Да, но у меня есть изображения с разной шириной и высотой. У меня есть изображения 150x99 px и изображения 99x150 pxSo позволяет сказать, что отношение отношение отличается. Думаю, я не могу правильно использовать проценты? – RobbertT

#img.source-image 
{ 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
}

Необходимо сделать трюк.

Кроме того, сделайте свой вопрос более понятным.

http://css-tricks.com/how-to-resizeable-background-image/ имеет несколько достойных примеров.

источник

2013-02-27 14:29:28 Jonast92

Привет, спасибо за ваш ответ. Надеюсь, все было ясно. Но все равно это не исправляло это для меня. У меня есть изображения внутри таблицы, которые имеют разную ширину и высоту. Поэтому установка ширины для изображений на 100% или любого процента не будет работать. Так что я ищу еще одно исправление, чтобы они автоматически настраивались на браузер – RobbertT

Вы можете попробовать изменить их размер с помощью некоторого алгоритма, а затем загрузить изображения в зависимости от размера экрана, SimpleImage мог бы выполнить эту работу: http: //www.white- hat-web-design.co.uk/articles/php-image-resizing.php Или просто добавьте/удалите определенные классы изображений, соответствующих размеру экрана, используйте фиксированные пиксели вместо процента, если это даст вам ад. – Jonast92

старайтесь не отображать изображения внутри таблиц, так как таблица должна загружать каждую ячейку, прежде чем какая-либо из них будет отображаться, увеличивая загрузку, чтобы просмотреть время. Также везде, где это возможно, попробуйте и не позволяйте браузеру изменять размер любого изображения. Вы можете сделать это сами с гораздо лучшими результатами. Вы можете определить в css для определения размеров экрана. Затем установите серию размеров экрана, чтобы вести разные изображения, например, если window.width 00px {load 800pxImage}, если window.width> 800px {load 1600pxImage} таким образом вы можете компенсировать огромное разнообразие окон браузера, поскольку это не так, что один дизайн будет отлично работать на всех машинах. Это может привести к большему количеству кода и потребовать немного больше исследований, но вы должны изучить его. Вот пример использования HTML & CSS:

HTML /* стандартный корпус и настройка DIV, чтобы создать ответный сайт, который изменяет свой размер с каждым окном браузера, это хороший способ, чтобы браузер, чтобы настроить блок секции */

<body class="background"> 
    <div id="content" class="etc"> 
     ..... 
     .... 
     </div> 
</body>

CSS

/* создать простой файл CSS, чтобы включать в себя основные параметры */

body { 
    font: 100%/1.4, Verdana, Geneva, Sans serif; 
    margin: 0; padding: 0; border: 0; 
    width: 100%; Height: 100%; } 

div #content { 
    width: 75%; 
    text-align: center; } 

/*Apply as default image to use if the window does not meat any criteria */ 
body.background { 
    background-image: url(../Images/YourImage1600px); 
    background-repeat: no-repeat; }

/* определить, равен ли размер экрана или меньше 800 пикселей, если он загружен и использовать css внутри определяющих скобок. У вас может быть несколько операторов для определения нескольких параметров. Для аккуратного кода вы можете поместить все новые требования в отдельный файл css и внутри оператора запроса, просто ссылку на файл css. так что технически вы могли бы иметь один отдельный файл CSS, который используется для ничего, но для определения требований пользователей и загрузить другие файлы CSS

@media only screen and (max-width: 800px){ 
    body.background { 
     background-image: url(../Images/YourImage800px); 
     background-repeat: no-repeat; 
    } 
}

я надеюсь, что вы можете понять все это, и это помогает.

источник

2013-06-18 09:46:58 Sean

Настройка размера изображения в браузере

ответ

Смежные вопросы