CODEWITHSUNDEEP
jqueryhtmlcss
bert
bert

Reputation: 4059

Specifying width and height of images in HTML

So I'm using a responsive carousel plugin called slick.js, but the responsive aspect doesn't work if I specify the width and height of the images in the HTML (As the page gets smaller, the width of the photos decreases, but the height stays the same, so they look horribly stretched).

I initially just didn't bother specifying the dimensions in HTML, but obviously it doesn't validate and I know it's bad practice anyway.

Any idea how to get round this?

Will provide code if necessary, but I feel it might just be a problem I can be given an answer to without code.

Upvotes: 0

Views: 118

Answers (2)

Sleek Geek
Sleek Geek

Reputation: 4686

To avoid that horrible look or the stretching,do this.

1.wrap the image in a container. see below.

<div id="imager"><!-- Begin -->

<!-- Your image goes here -->

</div><!-- End Imager -->

2.Create a block of CSS for #imager With defined width and height. 

 #imager {
    wdth: 400px; /* Adjust as need */
    height: 350px; /* Adjust as need */
    overflow: hidden; /* hides any part of the image that grows 
    beyond the given dimension */
    }

3.Create a block of CSS for image itself With eighter the height or width set to auto.

 #imager img {
        wdth: 100%; /* Must match the width of #imager */**
        height: auto;/* Auto allows the image 
        the space to adjust without deteriorating */
        }

Upvotes: 2

jan199674
jan199674

Reputation: 753

You might be able to overrule slick.js by defining the values for 'img' in CSS in either head of the page or maybe in an external stylesheet - you may have to consider which rule (slick.js or CSS) is the last to be rendered.

Specifying dimensions directly on the img-element is not bad practice and will validate - however you will only able to specify the proportions using 'unitless values' fx 'width:600' - proportions for 'img' in HTML with values like percentage, pixel or any other value wont work. However the 'unitless value' still refers to image-proportions measured in pixels.

This is because the element 'img' belongs to the group of elements called 'replaced elements', which comes with a pre-defined styling - in the case of 'img' the proportions of the original image will be preserved until something else is defined in CSS with "real" values:

Using CSS2 you can make your images scale quite easily by adding a class to the element:

.img_width {
    width: 100%; 
    height: auto; 
}

With CSS3 - which lacks support from IE8 and prior - you have 2 opportunities which you can apply directly on the element:

Using background-size 'cover':

img  {
    background: url(image.jpg);
    background-repeat: no-repeat;
    background-position: center; 
    background-size: cover; 
]

Using background-size 'contain':

img  {
    background: url(image.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; 
}

Upvotes: 0

Related Questions