Loading

HTML IMG

HTML IMG

David Smith

13y1.5kHTML 5

How to make a img fit or stretch into a div. Base upon my css code below, the smaller the height, the image is being cut off

Below is my html code.

CSS code:

.carouselMainImage

{

height: 250px;

}

8 Replies

Know the answer? Post it — somebody with the same question will find it here.

Iftikar Hussain13y ago
Accepted answer
Hi,
try like this

CSS code:

.carouselMainImage img
{
height: 250px;
}

Regards,
Iftikar
0
Iftikar Hussain13y ago
anchor tag means ""

Regards,
Iftikar
0
David Smith13y ago
what do you mean when you say anchor tag?
0
Iftikar Hussain13y ago
since the height and width style attribute does not apply to anchor tag. Therefor we set the height for image by declaring img tag after .carouselMainImage

Regards,
Iftikar
0
David Smith13y ago
yes that work. Can you explain why that work?
0
Iftikar Hussain13y ago
try by modifying the css mentioned earlier. also attach the screen shot of your image issue

Regards,
Iftikar
0
David Smith13y ago
this is the style:

div
{
display:block;
}

.carouselWrapper
{
position:relative;
zoom: 1;
}

.carouselMainStoryContent
{
zoom: 1;
}

.carouselMainStoryContentHeader
{
position:relative;
zoom: 1;
}

.carouselMainImage
{
height: 100%;
}

.carouselMainImage
{
display: block;
width: 100%;
text-align: left;
overflow: hidden;
position: relative;
}

.carouselFooter
{
background-color:Blue;
}

.carouselContainer
{
padding: 0 22px;
background-color:silver;
height:75px;
}

.carouselContainer
{
border-top: 1px solid #e4e4ec;
}

HTML CODE BELOW:

0
Iftikar Hussain13y ago
can you give me what style you have declared for carouselMainStoryContentHeader

Regards,
Iftikar
0