How to set image width to 100% based on certain size constraints of container?

Question

The images can be wider than the width of their container or smaller than it. To control the width of larger images, I can use max-width: 100%. Similarly, I can also set width:100% for smaller images.

Is there any way to set image width to 100% only if the original image is at least 50% of its container width? I will prefer a CSS based solution if it exists because the images will load dynamically.

The **only if** part of your question is called a conditional.. those don't exist in CSS.. — I wrestled a bear once., Jun 10 '16 at 20:48
Have you tried `background-size: contain` or `background-size: cover`? — Rory McCrossan, Jun 10 '16 at 20:55

score 0 · Answer 1 · edited May 23 '17 at 12:16

0

Since the images will load dynamically, I think your best shot is with javascript. You'll need to get the width of the image (Determine original size of image cross browser?), and then you can compare that to the parent of the image, and determine if it's above or below 50%.

UPDATE:

Considering the question didn't provide any sample code, I didn't want to just guess. But, the pseudo code would look something like this:

// after ajax completes
var image = jQuery('.image'),
parent = image.parent();
if (image.width() * 2 >= parent.width()) {
   image.css('width','100%');
}

edited May 23 '17 at 12:16

Community

1
1

answered Jun 10 '16 at 20:48

James Collier

157
10

Linking another SO answer, does not make this an answer. Update with code examples. – Adam Buchanan Smith Jun 10 '16 at 20:49
How will it work if images are loaded using AJAX? CSS will actually resize all images though. Sorry, if I am missing something. :) – SanJeet Singh Jun 10 '16 at 20:50
you are missing something... you can't load images via ajax, it doesnt work like that.. why dont you post some code so we can see what youre really doing – I wrestled a bear once. Jun 10 '16 at 20:52
@PootieTang Why can't the OP load images using AJAX?? ... I've done that many times – Asons Jun 10 '16 at 20:55
please post a code example so i can see what you are referring to as ajax – I wrestled a bear once. Jun 10 '16 at 20:56
@PootieTang If you refer loading images as in "binary" then I am not, I mean of course an image resource ... but one actually can load it using base64, very rare though – Asons Jun 10 '16 at 21:01
right, you could, but that would be asinine. i was confident that wasn't what op meant. – I wrestled a bear once. Jun 10 '16 at 21:05

score 0 · Answer 2 · answered Jun 10 '16 at 20:50

0

var containerDiv = $(".container");
var image = $(".img");
image.width(image.width()>containerDiv.width()?containerDiv.width():image.width());

answered Jun 10 '16 at 20:50

I wrestled a bear once.

22,983
19
69
116

Will it still work if image are loaded using AJAX. Because as far as I know the JavaScript will only run once. :) – SanJeet Singh Jun 10 '16 at 20:51
Fire it from the AJAX response. – hopkins-matt Jun 10 '16 at 20:52
1

what on earth do you mean youre loading images via ajax??? that doesnt make any sense – I wrestled a bear once. Jun 10 '16 at 20:53
1

@PootieTang LOL I meant loading some HTML via ajax which contains some images. – SanJeet Singh Jun 10 '16 at 20:54
yeah, if you put this in the ajax response function it will work – I wrestled a bear once. Jun 10 '16 at 20:57
but really, it's just markup that you're loading from ajax, not images. – I wrestled a bear once. Jun 10 '16 at 20:57
make sure you run that code after you add the markup to th edom though – I wrestled a bear once. Jun 10 '16 at 20:58
So, this code is supposed to go after the HTML i load via AJAX inside a `script` tag? – SanJeet Singh Jun 10 '16 at 20:58
don't put this code in the markup that you are getting from ajax, put it in the function that is actually making the ajax request. – I wrestled a bear once. Jun 10 '16 at 20:59

How to set image width to 100% based on certain size constraints of container?

2 Answers2