HTML: масштабные изображения с использованием максимальной высоты / ширины -- css пол Связанный проблема

HTML: Scale images using max height/width


1
vote

проблема

русский

У меня есть веб-страница, которая отображает кучу изображений. Я хочу убедиться, что ни одно из изображений не превышает 200 пикселей шириной и 200 пикселей по высоте. Если кто-то, я бы хотел, чтобы это уменьшилось, чтобы самая длинная размерность составляет 200 пикселей.

Какой лучший способ сделать это? CSS? JavaScript (jQuery хорошо)?

Английский оригинал

I've got a web page that displays a bunch of images. I want to make sure none of the images are greater than 200 pixels wide and 200 pixels in height. If one is, I'd like it scaled down so that the longest dimension is 200 pixels.

What's the best way to do this? CSS? JavaScript (jQuery okay)?

</div
  
   
   

Список ответов

2
 
vote

Предполагая jQuery:

 <код> var img = $(img), width = img.width(), height = img.height(); if(width == height) {     img.width(200).height(200); } else if(width > height) {     img.height(Math.round(height / width * 200)).width(200); } else {     img.width(Math.round(width / height * 200)).height(200); }   

Вы можете просто установить самую длинное измерение и пропустить соотношение (если ширина и высота в противном случае не установлены в атрибутах, свойствах или CSS), но я не сделал тестирование браузера, чтобы быть уверенным, если он работает через доска.

 

Assuming jQuery:

var img = $(img), width = img.width(), height = img.height(); if(width == height) {     img.width(200).height(200); } else if(width > height) {     img.height(Math.round(height / width * 200)).width(200); } else {     img.width(Math.round(width / height * 200)).height(200); } 

You may be able to just set the longest dimension and skip the ratio (if the width and height are not otherwise set in attributes, properties or CSS), but I haven't done browser testing to be sure if it works across the board.

</div
 
 

Связанный проблема

1  Инструмент / Утилита тоже анализируют и решают CSS современные браузерные причуды и особенности?  ( Tool utility too analyze and solve css modern browser quirks and pecularities ) 
в качестве старых браузеров, таких как IE7, проскальзывают в состояние неэлевантности я хочу сосредоточиться на поддержке современных браузеров хорошо ( IE9...

1  Удалить таблицу TR при сохранении AddClass  ( Remove table tr while maintaining addclass ) 
Хорошо, у меня есть таблица TR, которая удаляется, когда вы нажимаете кнопку. Я использую Animate.css и хотел бы добавить класс после того, как мой запрос AJA...

-2  Как вы можете центрировать галерею с HTML и CSS  ( How can you center a gallery with html and css ) 
Я выхожу новый HTML и CSS и надеюсь, что кто-то может помочь. с помощью W3 Schools ( http://www.w3schools.com/css/css_image_gallery. ASP ) Я создал простую ...

1  Делая сова карусели жидкость / работа в процентах?  ( Making owl carousel liquid work in percentages ) 
У меня установлена ​​сова карусель, и она работает очень хорошо. Я доволен плагином, но что меня беспокоит, это то, что он не масштабируется с видом на просмо...

0  Невозможно переопределить CSS по умолчанию всех стилей элементов с помощью медиа-запроса  ( Cannot override default css of all elements style with media query ) 
Я пытаюсь сделать один веб-сайт отзывчив. Проблема в том, что некоторые элементы настраиваются с медиа-запросами, тогда как другие хранят свой родной стиль .....

0  У меня проблема с переполнением моей контактной формы при отображении на мобильном  ( Im having an issue with my contact form overflowing when displayed on a mobile ) 
Выпуск в основном, когда у меня есть эта форма, отображаемая на мобильном телефоне, когда я перехожу на ввод текста в форму, Textarea слишком много расширяетс...

0  Скрывая неупорядоченный список, когда у него нет элементов  ( Hiding an unordered list when it has no elements ) 
У меня есть проблема, которая кажется сначала, как общий язык No-Brainer и легкая задача. У меня есть плагин JavaScript на моей странице, который генерирует...

0  Как сделать раскрывающееся меню горизонтальное  ( How to make a drop down menu horizontal ) 
Я не уверен, что это возможно, но у меня есть кнопка, называемая фруктами. Когда я нажимаю на него, 4 фруктовые кнопки появляются вертикально вниз, но я хочу,...

0  Почему изображение не отображается в Div в IE8  ( Why image doesnt show up within a div in ie8 ) 
У меня есть следующие HTML: <код> <!-- default stylesheets --> <link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css"> <!-- if ie version...

0  Маржа не действует должным образом в Firefox  ( Margin not acting properly in firefox ) 
У меня очень странная проблема, что за жизнь меня я могу решить. По сути, в Safari My Top Navigation не имеет верхнего поля и является промывкам с самой верхн...

0  всплывающее окно не назначает центр экрана  ( Popup not assign the center of the screen ) 
У меня есть код ниже, чтобы назначить всплывающую точный центр экрана. Но это не работает. Всплывающее окно появляется в разных местах, основанных на размере ...

3  Как поставить DIV в центре другого дивы?  ( How to put a div at center of another div ) 
Я хотел бы иметь один div в центре другого div горизонтально. <код> <div id="container"> <div id="centered"> hello world; </...

0  Как изменить цвет фона в jQuery  ( How to change background color in jquery ) 
Я хочу исчезать цвет фона, когда фокусируется; <код> $(document).ready(function() { $('.skiplink').focusin(function(){ $('#skip...

1  Как zamightlight не редактируемые клетки Backgrid?  ( How to hightlight non editable backgrid cells ) 
Я использую Backbone и Backgrid. Я хочу сделать некоторые клетки Backgrid без редактирования и выделите их. И я ищу простого свойства CSS по теми клетку. ...

6  Как я могу найти неиспользованные CSS в AJAX приложении?  ( How can i find unused css in ajax app ) 
Я искал, и я не могу найти какие-либо дополнения или JavaScript для поиска неиспользованных CSS в приложениях AJAX. Select-Me Selectors Можете сделать са...

Связанный проблема

1  Инструмент / Утилита тоже анализируют и решают CSS современные браузерные причуды и особенности? 
1  Удалить таблицу TR при сохранении AddClass 
-2  Как вы можете центрировать галерею с HTML и CSS 
1  Делая сова карусели жидкость / работа в процентах? 
0  Невозможно переопределить CSS по умолчанию всех стилей элементов с помощью медиа-запроса 
0  У меня проблема с переполнением моей контактной формы при отображении на мобильном 
0  Скрывая неупорядоченный список, когда у него нет элементов 
0  Как сделать раскрывающееся меню горизонтальное 
0  Почему изображение не отображается в Div в IE8 
0  Маржа не действует должным образом в Firefox 
0  всплывающее окно не назначает центр экрана 
3  Как поставить DIV в центре другого дивы? 
0  Как изменить цвет фона в jQuery 
1  Как zamightlight не редактируемые клетки Backgrid? 
6  Как я могу найти неиспользованные CSS в AJAX приложении? 



© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.