Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами и , как показано в примере 1.
Пример 1. Создание рисунка-ссылки
Вокруг изображения-ссылки автоматически добавляется рамка толщиной один пиксел и цветом, совпадающим с цветом текстовых ссылок.
Чтобы убрать рамку, следует у тега установить атрибут border=»0″ (пример 2).
Пример 2. Удаление рамки вокруг изображения
Можно также воспользоваться CSS, чтобы убрать рамку для всех изображений, которые являются ссылками. Для этого применяется стилевое свойство border cо значением none (пример 3).
Пример 3. Использование CSS
Конструкция A IMG определяет контекст применения стилей — только для тега , который находится внутри контейнера . Поэтому изображения в дальнейшем можно использовать как обычно.
I’m doing a list of items, but it has some challenges:
- Responsive;
- The «title» may have more than one line;
- Sometimes a I need to show a icon with a color in the background instead of full image.
This is the image of what I’d expect: 
And what I’ve got: 
As you can see, I can’t set the same scaling to an «image» div when it has a icon. Is there any solution for my problem?
9 Answers 9
I am assuming your images (exept icons) all have the same aspect ratio as in your example.
In this case, you can use padding bottom to keep the height of the image container. As padding-bottom is calculated according to the width of the container, it will keep it’s aspect ratio whatever the content (you will have to position the content with position:absolute; so it doesn’t change the dimesions of the container).
Here is a demo Showing what you can do.sorry I’m not into codePen
I also added an other container to center the icons horizontaly.
add follwing to .items .item .image
when you have a ‘normal’ w >
You can use SCSS percentage function:
padding-bottom: percentage(100px / 200px);
This is not exactly what you had in mind however it is a very responsive design which I expect to be what you need:
Here’s the gist: You probably want to keep the aspect ratio of each main container. The image then scales to at least 80% of the height and no more than 100% in both width and height. The way to create an aspect ratio on a div is by using this fun padding-top trick. When you resize the screen the div’s width changes which causes the height to change to (aspect ratio). So if you resize smaller then eventually the div becomes smaller than the image size which will cause the 200×100 to fill the entire div.
So if you want the image to fill the div, then it must be (A) larger than the div and (B) the same aspect ratio as the div.
You mentioned the title might be multiple lines: Right now new lines go below. If you wanted the text to ‘float upwards’ then that wouldn’t be too hard. Simply use position:absolute; bottom:0px on the header and make sure .item has position:relative .
Here is what I am trying to accomplish in HTML/CSS:
I have images in different heights and widths, but they are all under 180×235. So what I want to do is create a div with border and vertical-align: middle them all. I have successfully done that but now I am stuck on how to properly a href link the entire div .
Here is my code:
Please note that for the sake of copy pasting here easily, the style code is inline.
I read somewhere that I can simply add another parent div on top of the code and then do a href inside that. However, based on some research it won’t be valid code.
So to sum it up again, I need the entire div ( #parentdivimage ) to be a href link.