резиновая картинка в css

Jolly1 · April 17, 2013

Если ставлю в html, то картинка работает. А если преобразую в css, то картинка исчезает.

Что неправильно?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd">

<head>

<title>Документ Без Имени</title>

</head>

<body>

</body>

</html>

CSS:

.min {

background-image: url(logo.png);

float: left;

margin: 0 10px;

max-width: 100%;

height: auto;

}

mrnobody · April 17, 2013

Задайте фиксированные размеры элементу .min. так как внутри элемента нету контента, то его высота равна нулю, так как вы задали элементу float: left, а ширина в этом случае тоже зависит от контента, следовательно получается блок с высотой и шириной 0px × 0px. А то, что вы задали max-width: 100% говорит о том, что его ширина не может быть больше 100% родителя, это не означает что вы задали ему ширину в 100%.

Edited April 17, 2013 by mrnobody

Jolly1 · April 17, 2013

Спасибо за ответ, но в таком случае картинка фиксированная, а мне нужно как здесь: http://shpargalkablog.ru/2012/06/kartinka-po-razmeru-ekrana-css.html Помогите, пожалуйста.

max2012 · April 17, 2013


.min {
background-image: url(logo.png);//What?
float: left;
margin: 0 10px;
max-width: 100%;
height: auto;
}


<img src="/images/logo.png" <!--What?--> style="float: left; margin: 0 10px; max-width: 100%; height: auto;"/>

Если вы понимает,о чём я

Да и вообще, присваивать стили эллементам напрямую,когда свойств больше,чем 1,very bad

Edited April 17, 2013 by max2012

Jolly1 · April 17, 2013

max2012 А Вы можете написать как правильно? :unsure:

npofopr · April 18, 2013

http://jsfiddle.net/npofopr/WXumm/1/ Edited April 18, 2013 by npofopr

Sign In

резиновая картинка в css

Question

Jolly1

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

mrnobody

Link to comment

Share on other sites

Jolly1

Link to comment

Share on other sites

max2012

Link to comment

Share on other sites

Jolly1

Link to comment

Share on other sites

npofopr

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information