Масштабируемая, центрированная ссылка на изображение

Я использую HTML & CSS, чтобы попытаться сделать центрированное изображение, которое при нажатии на него дает полную версию. Изображение также масштабируется, поэтому на меньших устройствах оно масштабируется. Сейчас я не беспокоюсь о пропускной способности клиента. У меня возникла проблема, когда область с интерактивным доступом находится за пределами изображения, что делает ее похожей на некую невидимую ссылку.Масштабируемая, центрированная ссылка на изображение

Вот что я имею в виду. problem image

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

Вот HTML для этой части.

<a class="image_link" href="/images/guides/wavelist_editing/fullsize/wave3.jpg"><img class="scalable_image popout_image centered" src="/images/guides/wavelist_editing/wave3.jpg"></a>

И CSS.

.content a:link.image_link { /*Not overqualified - overrides stuff on main.css. gets rid of the underline*/ 
    border-bottom: 0px none transparent; 
    text-decoration: none; 
    display:block; 
} 

.content .popout_image { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    box-shadow: 8px 8px 10px #555; 
    margin-bottom: 10px; 
    max-width: 100%; 
    min-width: 100px; 
} 

.content .scalable_image { 
    min-width: 100px; 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */ 
}

Чтобы проверить эту информацию здесь вычисленные значения для ссылки и изображений соответственно в светлячок (первое изображение неправильно показывает встроенный блок, я взял этот образ в тестировании, на самом деле это блок - но оба значения ввести не ошибка, не масштабирование или слишком большой для мыши): link stats img stats

Я чувствую, что я пропускаю что-то действительно очевидное здесь. Я не могу это сделать, потому что «ссылка на изображение» кажется довольно общей.

источник

2014-10-05 Mgamerz

Попробуйте это - http://jsfiddle.net/drLd534s/ – Anonymous

вы с ульд достичь его, как это:

JSFiddle - DEMO

HTML:

<div class="content"> 
    <a class="image_link" href="/images/guides/wavelist_editing/fullsize/wave3.jpg"><img class="scalable_image popout_image centered" src="http://placehold.it/350x150"></a> 
<div>

CSS:

.content { 
    text-align: center; /* add this */ 
} 
.content a:link.image_link { 
    border-bottom: 0px none transparent; 
    text-decoration: none; 
    display: inline-block; /* add this */ 
} 
.content .popout_image { 
    display: block; 
    box-shadow: 8px 8px 10px #555; 
    margin-bottom: 10px; 
    max-width: 100%; 
    min-width: 100px; 
} 
.content .scalable_image { 
    min-width: 100px; 
    max-width: 100%; 
    height: auto; 
    width: auto\9; 
}

источник

2014-10-05 05:47:10 Anonymous

Пришлось добавить много нового кода выравнивания в другие элементы в моем CSS, но это за работой. Благодарю. – Mgamerz

Как насчет этого?

<a href="#"> 
    <img src="https://www.google.com/images/srpr/logo11w.png" /> 
</a> 

a {display:inline-block;width:80%; height:auto} 

img {width:100%}

http://jsfiddle.net/ko2wzah9/

источник

2014-10-05 05:26:00 greener

Родитель изображения не может быть встроенным блоком. Он должен быть блочным или изображение не может уменьшаться, потому что оно не имеет относительного родительского размера. Странная вещь. – Mgamerz

@Mgamerz, тогда я не уверен, что полностью понимаю проблему. Вам нужен образ для масштабирования, но не для области с кликами? – greener

Область с клики должна быть такой же, как и изображение.По сути, изображение является ссылкой, но не областями слева или справа, если у меня максимальный размер. Изменить: проверка jsfiddle, похоже, показывает, что она работает, как хотелось бы. Позвольте мне реализовать его и проверить. Заключительное редактирование: это не центрирует изображение. – Mgamerz

Как я понимаю, что вам нужно, как этот

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>image link</title> 
    </head> 
    <body> 
     <a href="http://lorempixel.com/700/700" class="image-link"> 
     <img src="http://lorempixel.com/300/300" alt=""> 
     </a> 
    </body> 
    </html>

и CSS

a{ 
    display: inline-block; 
    position: static; 
} 

a img{ 
    position: relative; 
    z-index: 2; 
} 

a:before{ 
    content: ''; 
    position: fixed; 
    background: rgba(031, 031, 031, 0.7); 
    top:0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
}

the example

источник

2014-10-05 05:43:40

Возможно, я просто очень плохо объясняю это, но комментарий Мэри был именно тем, что я хотел: http://jsfiddle.net/drLd534s/ – Mgamerz

Масштабируемая, центрированная ссылка на изображение

ответ

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