Как сохранить соотношение сторон при масштабировании изображения с помощью одного (CSS) размер в IE6?
объявляем класс с двумя полями в нем 1.int и 2.String
class A
{
int i;
String s;
}
в основном методе создания объекта массива (класса A) этого класса, к которому вы можете обращаться из int и String через точку (.) метод
как:
A[] obj = new A[10];//creating array of object
теперь доступ ко всем элементам с помощью:
for(int j=0;i<obj.length;j++)
{
obj[j]=new A();//assigning object to reference
obj[j].i=10;
obj[j].s="hello";
}
4 ответа
Адам Лютер дал мне идею для этого, но на самом деле все оказалось очень просто:
img {
width: 75px;
height: auto;
}
IE6 сейчас хорошо масштабирует изображение, и это похоже на то, что все остальные браузеры используют по умолчанию.
Спасибо за оба ответа!
Ну, я могу подумать о CSS-хаке, который решит эту проблему.
Вы можете добавить следующую строку в вашем файле CSS:
* html .blog_list div.postbody img { width:75px; height: SpecifyHeightHere; }
Приведенный выше код будет виден только IE6. Соотношение сторон не будет идеальным, но вы можете сделать его несколько нормальным. Если вы действительно хотите сделать его идеальным, вам нужно написать некоторый javascript, который будет читать исходную ширину изображения, и соответственно установить соотношение, чтобы указать высоту.
Единственный способ сделать явное масштабирование в CSS - использовать трюки, такие как найдено здесь .
Только для IE6, вы также можете использовать фильтры (см. PNGFix ). Но для их автоматического применения на странице потребуется javascript, хотя этот javascript может быть встроен в файл CSS.
Если вам потребуется javascript, то вы можете просто захотеть, чтобы javascript заполнил недостающее значение для высоты с помощью проверка изображения после загрузки контента. (Извините, у меня нет ссылки на эту технику).
Наконец, извините за эту мыльницу, вы можете отказаться от поддержки IE6 в этом вопросе. Вы можете добавить _width: auto после вашего правила width: 75px , чтобы IE6 по крайней мере разумно отображал изображение, даже если оно неправильного размера.
Я рекомендую последнее решение просто потому, что IE6 находится на выходе: 20% и снижается почти на процентов в месяц . Также отмечу, что ваш сайт предназначен для отдыха и в Великобритании. И то, и другое помогает демографическому уклону от использования IE6: использование IE6 в выходные дни падает почти на 40% (без цитирования, извините), а в Великобритании демография IE6 значительно ниже (опять же без цитирования, извините).
Удачи!
I'm glad that worked out, so I guess you had to explicitly set 'auto' on IE6 in order for it to mimic other browsers!
I actually recently found another technique for scaling images, again designed for backgrounds. This technique has some interesting features:
- The image aspect ratio is preserved
- The image's original size is maintained (that is, it can never shrink only grow)
The markup relies on a wrapper element:
<div id="wrap"><img src="test.png" /></div>
Given the above markup you then use these rules:
#wrap {
height: 100px;
width: 100px;
}
#wrap img {
min-height: 100%;
min-width: 100%;
}
If you then control the size of wrapper you get the interesting scale effects that I list above.
To be explicit, consider the following base state: A container that is 100x100 and an image that is 10x10. The result is a scaled image of 100x100.
- Starting at the base state, the container resized to 20x100, the image stays resized at 100x100.
- Starting at the base state, the image is changed to 10x20, the image resizes to 100x200.
So, in other words, the image is always at least as big as the container, but will scale beyond it to maintain it's aspect ratio.
This probably isn't useful for your site, and it doesn't work in IE6. But, it is useful to get a scaled background for your view port or container.