Menu
I'm trying to build a very basic site with an image centered in the middle of the page with three lines of text below it, also centered.
I have it how I want it to look on a larger screen, but when viewed on a smaller screen (iPhone) the image is too large. I need to have the image resize based on the screen resolution.
I've done some Google'ing and know this is possible, but have not been able to get it to work. HTML/CSS is not my strong suite. Any help would be much appreciated. Here is my code:
<html>
<style>
body {
font-family: 'Helvetica', 'Arial', sans-serif;
background: white }
section {
background: white;
color: black;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
</style>
<section>
<IMG src="Logo.png" alt="Logo">
<br><br>
<h1><center><p><a href="mailto:[email protected]" style="color: #D08242" target="_top">Email</a>
<p><font color=B5B5B5>Phone Number
<font size=7> <p><i>Tagline</i></center></font>
</section>
</html>
539
Using CSS, you can set the background-size property for the image to fit the screen (viewport). The background-size property has a value of cover . It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport.
A common use is to set max-width: 100%; height: auto; so large images don't exceed their containers width. Another way is the use of object-fit property, this will fit image, without changing the proportionally.
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels. For example, the original image is 640×960.
You can use media queries. Try to add the following code in your CSS.
CSS:
@media screen and (max-width: 480px) {
img {
width: 400px;
}
}
Once the browser is at 480px, it will make the img width 400px. You can change these numbers to suit your preference.
145
You need to look into setting up fluid images, this will help you get started...
CSS Fluid Image Technics
Here is an example...
HTML
<section class="container">
<img src="http://placehold.it/750x250">
<div class="copy">
<a href="mailto:[email protected]" target="_top">Email</a>
<p>
<span class="phone-number">Phone Number</span><br />
<span class="tagline">Tagline</span>
</p>
</div>
</section>
CSS
body {
font-family: 'Helvetica', 'Arial', sans-serif;
background: white
}
.container {
bottom: 0;
left: 0;
height: 300px;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 100%;
}
.container img {
max-width: 100%;
}
https://jsfiddle.net/kennethcss/71a6mngh/
The image is centered (using absolute centering), and when you drag the browser in the image automatically adjust it's size...this is how fluid images behave (no need for media queries per se). If you still need a media query you can do something like this...
30
You need to add a max-width to the image:
img {
max-width: 100%;
}
just off topic: <h1><center><p>..</p></center></h1> is invalid. Just use <h1>..</h1> and style it.
<font> is also invalid and deprecated (just like center)
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
