Изменение размера изображения с помощью ссылки в div

Я пытаюсь изменить размер div с идентификатором «homeLink». Я начну с того, что заявлю, что я ноль в CSS, и я хочу, чтобы меня бросили кость, только потому, что я знаю, что это так просто. Я также уверен, что это объяснит что-то фундаментальное в использовании CSS, чего я не понимаю, поэтому любые указатели на ссылки, которые помогут, будут оценены.

Я видел этот пост, но не уверен, что понимаю почему я не могу делать то, что пытаюсь. Я сделал RTFM (тот, который смог найти), и до сих пор не понял. Я хотел бы избежать вызова js для этого, но, возможно, мне это не нужно.

Спасибо за любую помощь; код ниже.

    <html>
        <head>
            <style> 
                #homeLink { 
                    /*this doesn't work */
                    // width: 50%;
                    position:absolute;
                    left:10px;
                    top: 770px;
                }

                /* nor does this */
                #homeLink a {
                    width: 10%;
                }       
            </style>
        </head>

        <body>
            <div id="homeLink"><a href="http://www.someurl.com"><img src="homebutton.png"/></a></div>
        </body>
    </html>

html css anchor image-resizing
person jml    schedule 06.05.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward 

<img class="image" src="homebutton.png"/>

то в вашем стиле css это:

.image {
height: 200px;
width: 300px;
}
person 1321941    schedule 06.05.2012
comment
Большое спасибо. Эй, не могли бы вы объяснить мне, когда использовать класс и когда использовать идентификатор? Например, я пытался использовать идентификатор в этом случае с тегом img, но это не сработало. - person jml; 07.05.2012
comment
Класс предназначен для тех случаев, когда вы что-то потеряли (подумайте об этом как о категории), а идентификатор — для чего-то уникального. Если мы представим это в терминах школы, у вас будет класс учеников, которые все принадлежат к одному классу, поэтому у них могут быть похожие свойства, но все они также будут иметь уникальные атрибуты, поэтому у них есть идентификатор. Таким образом, они будут принадлежать классу и наследовать некоторые свойства, а также иметь уникальный идентификатор. - person 1321941; 07.05.2012

arrow_upward
2
arrow_downward

Как заявил @Mr D, вам нужно изменить размер самого изображения, а не div.

Эта часть:

#homeLink a {
width: 10%;
}

на самом деле неправильно с точки зрения CSS, поскольку a не имеет свойства width. Вы можете предварительно отформатировать определенные действия или ссылки с помощью CSS, например, подчеркивание при наведении указателя мыши на ссылку и изменение цвета посещенных ссылок:

a.hover {text-decoration: underline}
a.visited {color: #999999}
person darf    schedule 06.05.2012
comment
Просто чтобы добавить к этому хорошему объяснению, изменение высоты #homeLink a похоже на увеличение дома, вы можете сделать его таким большим, как хотите, но холодильник внутри него не изменится. Для этого вам придется физически увеличить холодильник. Здесь тот же принцип, вы увеличивали контейнер, но не фактическое изображение. - person 1321941; 06.05.2012
comment
blueish and darf: Большое спасибо за прекрасные объяснения. - person jml; 07.05.2012

arrow_upward
0
arrow_downward

это не изменение размера из-за изображения в контейнере div, которое может быть больше, чем ширина и высота контейнера

  1. вы можете добиться этого, добавив скрытое переполнение в контейнер div.
  2. или используя следующий css
#homeLink,#homeLink a img { 

                    width: 50%;
                    position:absolute;
                    left:10px;
                    top: 770px;
                }
or

#homeLink{
      width:50%;
      position:absolute;
      left:10px;
      top:770px;
      overflow:hidden;
}
person Yasir    schedule 06.05.2012
comment
я нашел это очень сложным по отношению к тому, что я спрашивал. здесь может быть много информации для изучения, но я не думаю, что она имеет такое же значение, как информация других пользователей. - person jml; 07.05.2012