0

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.

6
  • 3
    set one to a % and the other to auto?
    – jbutler483
    Dec 8, 2014 at 14:15
  • Ah right, I thought HMTL dimensions had to be in pixels. Thank you!
    – bert
    Dec 8, 2014 at 14:16
  • 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. I always use css to specify my width and height rather than attributes on the img tag. Especially with html5 as using percentages in the attributes is invalid: w3.org/TR/html-markup/img.html (expecting width or height in css pixels). What does your code look like when it doesn't validate?
    – Pete
    Dec 8, 2014 at 14:19
  • Ah right, I thought it had to be in pixels! Basically it says that I must specify the original image dimensions in my HTML. I normally do that, but then I specify the dimensions I'm actually using in my CSS (whether it be in pixels, or percentages or whatever). The problem here is that slick.js decides the width of the image based on viewport width, but doesn't specify anything for the height. This means that the only height it has to go off is what I specify in my HTML. I may be wrong about this, but I'm pretty sure that's what's happening.
    – bert
    Dec 8, 2014 at 15:01
  • The question does not describe what you really want to achieve. As a technical question about setting dimensions in HTML, it is trivial: of course you can do so (whether validators don’t approve that is a different issue, and you did not even specify what they do not approve), and you can alternatively use CSS settings. Dec 8, 2014 at 15:21

2 Answers 2

2

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 */
        }
1
  • 1
    This works really well, thanks! I set #imager to the width of the original photos for when the viewport is wide and then added a breakpoint for below 400px width where the #imager width is 350px wide so it doesn't cut out too much of the picture on smaller screens.
    – bert
    Dec 8, 2014 at 15:13
0

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; 
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.