2015-06-02 3 views
0

Я не могу изменить размер изображения в css/html. Ican изменить размер в px, но не в%. Я уже пробовал min-height, min-widht. Вот мой код, я не могу изменить его размер.css html percent resize image

body{ 
 
    margin: 0; 
 
} 
 
#top{ 
 
    background-color: #53FF40; 
 
    width: 100%; 
 
    height: 50%; 
 
} 
 
#bottom{ 
 
    background-color: #FF5757; 
 
    width: 100%; 
 
    height: 50%; 
 
} 
 
.img-yes{ 
 
    width: 25%; 
 
    height: 25%; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>DoYouLoveDogs</title> 
 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
 
<body> 
 
<div id="top"> 
 
<div class="img-yes"> 
 
    <img class="img-yes" src="img/yes.png"> 
 
</div> 
 
</div> 
 
<div id="bottom"> 
 
</div> 
 
<script src="js/jquery.js"></script> 
 
<script src="js/button.js"></script> 
 
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script> 
 
</body> 
 
</html>

+0

Я не понимаю вопроса. Можете ли вы воспроизвести проблему в JSFiddle.net? – LinkinTED

+0

Что именно вы хотите? Измените размер img? Можете ли вы это поиграть –

+0

Я не вижу проблем с кодом, который вы дали. Он отлично изменяется. – Anonymous

ответ

1

display: block Дайте?

.img-yes { 
    display: block; 
    width: 25%; 
    height: 25%; 
} 
0

Прежде всего вам необходимо установить размер в пикселях для внешнего DIV изображения. Затем измените размер изображения с процентом.

.outerdiv{ 
    width:200px; 
    height:200px; 
} 
.img-yes{ 
    width: 50%; 
    height:30%; 
} 

Но если вы хотите изменить размер изображения, вы можете указать ширину только в процентах, а высота будет автоматически задаваться в соответствии с шириной.

0

Я просто скопирую вставить код в блокнот (смените внутренний css на встроенный css и измените путь к изображению) и выполните его. Он работает правильно. Когда я увеличиваю ширину, размер изображения изменяется в соответствии с шириной.

0
.img-yes { 
    height: 40% !important; 
    margin: 5px 28px 22px 82px; 
    width: 50% !important; 
}