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>
Member Avatar

diafol

How about searching for "resize responsive images"

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

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.

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

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?

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

Member Avatar

diafol

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

Member Avatar

david.roun.7_1

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.

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.