Member Avatar for nathan.pavlovsky

Hello Programmers!

I am working on a 'comics' page of my website. It is going to have multiple pictures (arranged neatly in a table) for the viewer to see and enjoy. I would like to have the images (by default) have a width of 10% of the browser window's width and a height of 10% of the browser window's height. I would also like for the images to resize when the browser's window's width &/ height made bigger/shorter, so that the images will be still seen. Currently, my website just uploads the pictures: they do not have the correct width or the correct height, nor do they resize themselves when needed. Could somebody look at my code below (my images are attached to this post), and suggest a solution for each of these problems? Thanks in advance!

<!DOCTYPE html>
<html>
<head><title> ----------'s Website's Interesting Photos  </title>
<style type="text/css">
body {
      background-color:orange;
      background-image: url('background2.gif');
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-position:center; 
      background-size:cover;
}

p
 {
text-align:justify;
color: red;
font-family:  Arial,"Times New Roman", Times,  "Courier";
font-size: 25px;
margin-right:5%;
margin-left:5%;
}

h1
{
color: red;
text-align: center;
font-weight: bold;
text-decoration: underline;
font-family: Arial,"Times New Roman", Times, serif, "Courier";
font-size: 40px;
}

h2
{
color: red;
font-weight: bold;
text-decoration: underline;
font-family: Arial, "Times New Roman", Times, serif, "Courier";
font-size: 25px;

}

h5
{
color: red;
text-align: center;
font-weight: bold;
font-family: Arial, "Times New Roman", Times, serif, "Courier";
font-size: 20px;
}



/* Change Highlighted Text and Background's Colors*/
::selection {
     background: red;
     color:white;
}
::-moz-selection {
     background: red;
     color:white;
}
</style>


<h1 ><em> Welcome to ------------------'s Website's Comics Gallery! </em></h1>

<center><table>
<tr>

<td><img src="science teachers.gif"></td>
<td><img src="windows and mac.gif"></td>
</tr>

</table></center>

</body>
</html>
science_teachers.jpg 40.13 KB windows_and_mac.jpg 296.07 KB
Edited by nathan.pavlovsky because: Privacy
  • 4 Contributors
  • 9 Replies
  • 376 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by nathan.pavlovsky

Dani AI

Generated

Brief recap and root cause: wanted each comic to be 10% of the browser width and 10% of the browser height and to resize when the window is resized. After following generic "responsive images" tips the images only reacted to changes in width. That behavior is normal: percentage-based heights (and max-height) need a parent element with an explicit height to work. Table cells and auto-height parents give no fixed reference for a percent height, so a vertical shrink won't force the image to change.

Practical fixes (apply the one that matches the desired visual result):

  • Preserve aspect ratio and respond to viewport changes: size images with viewport-width units and let height be automatic.

    .gallery img {
  width: 10vw;    /* 10% of viewport width */
  height: auto;   /* keeps image from stretching */
  display: block;
}

  • If the image must occupy exactly 10% of both viewport width and height (possible cropping), use a fixed-size box and object-fit:

    .box { width: 10vw; height: 10vh; overflow: hidden; }
.box img { width: 100%; height: 100%; object-fit: cover; display: block; }

Notes and troubleshooting tips:

  • The OP’s earlier rule using percent max-heights failed because the parent had no fixed height. Setting a container height in vh units or setting html, body { height:100%; } and giving the parent an explicit height makes percent heights work, but viewport units are usually simpler.
  • Background images behave differently: background-size: cover scales to fill the element, but background-attachment: fixed pins the image to the viewport and can make it look unresponsive when the element’s height changes (this explains ’s observation). Removing fixed or using an actual <img>/absolutely-positioned element sized with vh/vw yields more predictable results.
  • Legacy-browser note: object-fit is not supported in older Internet Explorer versions; provide a background-image fallback for those cases.

Modern layout (CSS Grid/Flexbox) instead of table markup will make responsive sizing and alignment much easier.

Recommended Answers

All 9 Replies

Member Avatar for Member #120589

How about searching for "resize responsive images"

Member Avatar for nathan.pavlovsky

Thanks for providing me the search keywords. I was able to find an appropriate hint, and the website now works beautifully!

Member Avatar for nathan.pavlovsky

Uh... no. My photos now respond to the 'diagonal' and 'horizontal' shrinking of the browser's window, but they do not respond to the vertical shrinking of the browser's window. My code is below; how can I fix this?

<!DOCTYPE html>
<html>
<head><title> -------------------'s Website's Interesting Photos  </title>
<style type="text/css">
body {
      background-color:orange;
      background-image: url('background2.gif');
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-position:center; 
      background-size:cover;
}
img 
{
     max-width: 100%;
     max-height: 100%;
}

p
 {
text-align:justify;
color: red;
font-family:  Arial,"Times New Roman", Times,  "Courier";
font-size: 25px;
margin-right:5%;
margin-left:5%;
}

h1
{
color: black;
text-align: center;
font-weight: bold;
text-decoration: underline;
font-family: Arial,"Times New Roman", Times, serif, "Courier";
font-size: 40px;
}

h2
{
color: red;
font-weight: bold;
text-decoration: underline;
font-family: Arial, "Times New Roman", Times, serif, "Courier";
font-size: 25px;

}

h5
{
color: red;
text-align: center;
font-weight: bold;
font-family: Arial, "Times New Roman", Times, serif, "Courier";
font-size: 20px;
}



/* Change Highlighted Text and Background's Colors*/
::selection {
     background: red;
     color:white;
}
::-moz-selection {
     background: red;
     color:white;
}
</style>


<h1 ><em> Welcome to ------------------'s Website's Comics Gallery! </em></h1>

<center><table>
<tr>

<td><img src="science teachers.jpg"></td>
<td><img src="windows and mac.jpg"></td>
</tr>

</table></center>

</body>
</html>

Same pictures are used as before.

Member Avatar for JorgeM

When you say vertical, you mean by grabbing the left or right side of the browser window and changing the width of the window?

Member Avatar for nathan.pavlovsky

Yes. I also want the images to dynamically resize themselves along with changing the window's height, or if both the windo's height and width are changed similtaneously (also called by me as "diagonal"). If you test the code, it only changes with the resizing of the width. I want it to apply equally to all of the situations described. Any ideas?

Member Avatar for nathan.pavlovsky

Sorry for taking your time. I have solved this! Many thanks to those that trie d to help!

Member Avatar for Member #120589

Any chance you could post the solution so that others may profit from your hard work? It would be much appreciated.

Member Avatar for Member #1092581

I wish he would have, when I use background-size: cover; or background-size 100% 100%; it works fine unless I adjust the size of the window, then it covers the width but not the height.

Member Avatar for nathan.pavlovsky

The solution is that there is no solution. The height of a background image will NOT change, no matter what. I wold suggest that you use a solid-colored background, and include a regular as a background, and adjust the width and height. Maybe this will work, but I haven't tried it on mine.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.