CODEWITHSUNDEEP
htmlimagecss
Sunaina Nawax
Sunaina Nawax

Reputation: 19

How to shrink image size with CSS if its outer div size width and height is undefined?

<div class="vid-thumb-lg">
   <div class="vid-thumb">
      <img src="./images/hqdefault.jpg"> 
   </div>
</div>

Vid-thumb-lg: is parent div for my img and its caption inline

Vid-thumb: is div where image is actually contained

I want to stretch image size without setting width/height of parent div. I have used following code of CSS:

.vid-thumb {
    float: left;
    border: 1px solid #333;
    position: relative;
    overflow: hidden;
    background: #f1f1f1;
    vertical-align: middle;
    display: inline;
}

.vid-thumb img {
    margin-top: -46px;
    overflow: hidden;
    position: relative;
}

But still image size is larger, I need to shrink image from to, left, right, bottom.

Upvotes: 1

Views: 1428

Answers (1)

GCW
GCW

Reputation: 312

You need to set the width and height of the container, OR the dimensions of the first container vid-thumb-lg.

Then, if you don't want to use precise px size, use percentage. Fill the container = 

width: 100%;
height: 100%;

Instead, if you are talking about that little space on the bottom of the div.. is an invisible blank space you have by default in divs. You can remove it with:

div {
line-height: 0;
}

Do you mean like this?

http://jsfiddle.net/x59zLtn8/2/

Upvotes: 1

Related Questions