CODEWITHSUNDEEP
htmlcssresize
1234filip
1234filip

Reputation: 23

css html percentage resize image

I can't resize an image in css/html. Ican resize it in px but not in %. I already tried min-height, min-widht. Here's my code I can't resize it.

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>

Upvotes: 0

Views: 131

Answers (5)

Har devgun
Har devgun

Reputation: 533

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

Upvotes: 0

Puneet Chawla
Puneet Chawla

Reputation: 6009

I just copy paste you code in to notepad (change internal css to inline css and change image path) and execute it. It's working properly. When i increase the width, image resize according to width.

Upvotes: 0

umar_
umar_

Reputation: 491

First of all you need to set a size in pixels for outer div of image. Then resize image with percentage.

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

But if you only want to resize image you can only give width in percentage and height will automatically set according to width.

Upvotes: 0

Shrinivas Pai
Shrinivas Pai

Reputation: 7721

Add 

.img-yes
{
width: 100%;
height: auto;
}

fiddle

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

Give display: block?

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

Upvotes: 1

Related Questions