This is probably a huge topic, but is there a simplified way to adjust image-size as screen width decreases?
I am working on a page which lists articles It has an Article Title, Article Summary, and an Article Thumbnail. As my fluid design gets down under 600px, my current thumbnail is way too big, and under 400px it crowds out the text.
I am hoping there is a practical way to deal with this using just CSS (i.e. no JavaScript).
Thanks.
There are a few ways, depending on the needs of the page. It’s quite simple, something like:-
figure {
max-width: 100%;
text-align: center;
margin: 0;
}
figure img {
max-width: 100%;
height: auto;
}
Be sure to add the required image size to the img tag. If the parent container has no padding, you may want to add a little margin if required.
Also, you may want to use a class, rather than the figure tag, if figure is used for other things on the site or you have different ways of displaying pictures.
How is the thumb arranged in relation to the text. Is to the side (floated maybe) or as a block on its own line?
As I said, there are various way to deal with it, but the correct method depends upon the context of the image on the page.
The example ccs above is for an image that appears on its own line within the flow of an article. A thumbnail may want something a little different, especially if it’s to one side, not on its own line.
.right {
float: right;
max-width: 30%; /*proportion on the page*/
margin-left: 1em;
}
figure img {
max-width: 100%; /* can only be as big as the parent container*/
height: auto; /* keep the right aspect */
}
@media screen and (max-width: 500px) { /* when things get too tight */
.right {
float: none; /* lose the float */
max-width: 90%; /*nearly fill the page if you like*/
margin: 0 auto; /* centre it */
}
for
<figure class="right">
<img src="photo.jpg" alt="picture" width="300" height="250">
<figcaption>A Photo</figcaption>
</figure>
<p>Some text</p>
I’ll go back and read what you typed above, but in the mean time, here is some sample code… (Don’t say I never give you any code or context!) 
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#articleListing ul{
max-width: 600px;
min-height: 200px;
padding: 30px 7% 2rem 7%;
list-style: none;
list-style-position: inside;
text-align: left;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border: 1px solid #999;
}
#articleListing li{
display: block;
clear: both;
padding: 2rem 0 0 0;
}
.articleSummary a{
text-decoration: none;
}
.articleSummary h2{
font-size: 1.1rem;
}
.articleSummary img{
float: left;
display: inline-block;
margin: 3px 20px 0 0;
vertical-align: bottom;
border: 1px solid #AAA;
background: #FFFFFF;
}
</style>
</head>
<body>
<section id="articleListing">
<ul>
<li class='articleSummary'>
<a href='/articles/why-winterization-is-important'>
<h2>Why Winterization is Important</h2>
<img src="http://placehold.it/198x132">
</a>
<div class='publishedOn'>Published: November 8, 2015</div>
<p>
As the holiday season approachs, the cold temperatures outside will put considerably more stress on your vehicle. Now is a great time to have us inspect your vehicle and make sure your belts, hoses, tires and more are ready to deal with another long, cold winter.
</p>
</li>
</ul>
</section>
</body>
</html>
(Not sure if my CSS for the thumbnail is correct or the best.)
Do you just upload one image and then reduce its size as needed?
Do you only serve up the correct image based on screen size?
Other?
To make the image shrink with the screen when it gets small I just added max-width: 40%; to the .articleSummary img selector. It doesn’t have to be 40%, whatever looks right to you.
Because I use max-width not width it only goes as big as its native size.
You could also use a query to kill the float like I did above, if you want to.
You can do stuff like that with <picture> and srcset but I wouldn’t bother on a small thumbnail image. Save that for big full-screen pics.
The effect I want is that at certain points the image reduces in size.
When I added img{max-width:100%;} the image only shrunk when the text had already wrapped beneath it.
I want the image to start reducing so the text does not have to drop below it until the very end.
So it sounds like this is another case for your beloved media queries! 
Not necessarily. img {width: 40%} etc. does pretty much what you are describing. Of course, you can only do the “certain points” bit with media queries.
As Ralph mentioned a percentage width on the image will work to a degree.
You need to create a relationship between the image and the container. The container in this case is the ul which you have set to a max-width of 600px and as the image size is 198px we know that the image is approximately 33%.3% the width of its container.
Therefore setting the image to width:33% (or thereabouts) will keep the image at the original size to start with but will allow it to scale smaller as the window size reduces.
You can also set a min and max-width in px to stop the image getting too big or to small.
If you want more rigid steps in size then you would need to use media queries and adjust the image width at each step that you define.
So it sounds like this is another case for your beloved media queries!
<?php
$title = 'Making Images Responsive';
$sp = 'http://www.sitepoint.com/community/t/making-images-responsive/206764/8';
$art = array(
'link' => '/articles/why-winterization-is-important',
'image' => 'http://placehold.it/198x132',
'title' => 'Why Winterization is Important',
'date' => 'Published: November 8th, 2015',
'blurb' => 'As the holiday season approaches, the cold temperatures outside will
put considerably more stress on your vehicle.
Now is a great time to have us inspect your vehicle and make sure
your belts, hoses, tires and more are ready to deal with
another long, cold winter.',
'more' => '/articles/why-winterization-is-important',
);
?><!doctype html>
<html lang="en">
<head>
<title>title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Error: A “meta” element with an “http-equiv” attribute whose value is
“X-UA-Compatible” must have a “content” attribute with the value “IE=edge”.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {background-color:#debb1e; font-size:0.88em;}
div,
#jb {background-color:snow; color:green; padding-right:1em;}
#jb {width:88%; max-width:600px; min-width:300px; margin:auto;
list-style-type: none;}
#jb li {margin:1.42em auto; display:inline-block;
border-bottom: solid 1px #ccc; padding:1em;
list-style-position: inside; margin-left:-2em;}
#jb li a {text-decoration: none;}
#jb li:hover {background-color:#ddd;}
#jb li b {font-size:1.42em; color:red;}
#jb li h6 {color:blue; text-align:right;}
#jb li img {float:left; clear:both;
width:33%; min-width:99px; max-width:198px;
height:auto; margin-right:1em;}
</style>
</head>
<body>
<h4 style="float:right"> <a href='<?=$sp;?>'>SitePoint Forum </a> </h4>
<h1> <?=$title;?> </h1>
<hr />
<section>
<ul id="jb">
<?php for($i2=0; $i2<3; $i2++):?>
<li>
<a href='<?=$art['link'];?>'>
<b> <?=$art['title'];?> </b>
<h6> <?=$art['date'];?> </h6>
<img src="<?=$art['image'];?>" alt="blurb" />
<?=$art['blurb'];?>
</a>
</li>
<?php endfor;?>
</ul>
</section>
<div style='clear:both; width:88%; margin:4.2em auto; padding:1em'>
<?php highlight_file(__FILE__);?>
</div>
</body>
</html>
My two Satang;
That’s why I said 40% or whatever looks right to you.
Use 100% for block images on their own line, as in my first post.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.