Formatting an Image

Question

nathan.pavlovsky 0 Junior Poster

10 Years Ago

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>

html-css image web-design

Edited 10 Years Ago by nathan.pavlovsky because: Privacy

4 Contributors
9 Replies
331 Views
3 Weeks Discussion Span
Latest Post 10 Years Ago Latest Post by nathan.pavlovsky

diafol

10 Years Ago

How about searching for "resize responsive images"

JorgeM 958 Problem Solver

10 Years Ago

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

Reply to this topic

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.

nathan.pavlovsky 0 Junior Poster · Answer 1 · 2013-12-16T23:49:08+00:00

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

nathan.pavlovsky 0 Junior Poster · Answer 2 · 2013-12-16T23:52:12+00:00

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.

nathan.pavlovsky 0 Junior Poster · Answer 3 · 2013-12-17T02:41:00+00:00

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?

nathan.pavlovsky 0 Junior Poster · Answer 4 · 2013-12-19T22:46:44+00:00

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

diafol · Answer 5 · 2013-12-19T22:50:30+00:00

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

david.roun.7_1 · Answer 6 · 2014-01-12T04:18:21+00:00

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.

nathan.pavlovsky 0 Junior Poster · Answer 7 · 2014-01-12T05:01:25+00:00

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.