HTML/CSS Make image resize on smaller screens

Question

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@domain.com" style="color: #D08242" target="_top">Email</a>
<p><font color=B5B5B5>Phone Number
<font size=7> <p><i>Tagline</i></center></font>
</section>      
</html>

[this](http://stackoverflow.com/questions/39289576/css-image-resize-issue/39289947#39289947) might help you... — kukkuz, Sep 29 '16 at 01:21
@user51279 do you still have questions? If not, please mark the answer you accepted. — Kenneth Stoddard, Oct 01 '16 at 00:49

score 10 · Answer 1 · answered Sep 29 '16 at 01:33

10

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.

answered Sep 29 '16 at 01:33

Gosi

2,004
3
24
36

2

Thanks for including the actual answer instead of just linking off-site. – Nick Coad Sep 29 '16 at 01:35

Kenneth Stoddard · Answer 2 · 2018-05-08T02:35:54.870

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@domain.com" 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...

Why the down vote? Yes, you can change the size of the image for smaller viewports using media queries but it is only one small piece of the puzzle. In fact, fluid images will resize on their own based upon the width of the parent container if set up correctly. — Kenneth Stoddard, Sep 29 '16 at 01:43

Wim Mertens · Answer 3 · 2016-09-29T01:51:05.007

7

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)

edited Sep 29 '16 at 01:51

answered Sep 29 '16 at 01:41

Wim Mertens

1,780
3
20
31

score 1 · Answer 4 · answered Sep 29 '16 at 02:00

Try something as below, there were few error in your codes, you could style your HTML elements by adding style tag in your targeted HTML element or by adding external or internal CSS files. Well now to make it responsive use CSS media query as below, define breakpoints where you need your image to change.

@media screen and (max-width : 480px){
.......
.......
.......
} 
@media screen and (max-width : 320px){
.......
.......
.......
}

body{
  background:#fff;
}
#box{
  width:70%;
  height:300px;
  margin:auto;
  margin-top:20%;
}

#box > .bximg{
  width:180px;
  height:180px;
  overflow:hidden;
  margin:auto;
}
#box > .bximg > img{
  width:100%;
  min-height:100%;
}

@media screen and (max-width: 480px){
#box > .bximg{
  width:120px;
  height:120px;
 }  
}

<div id="box">
<div class="bximg">
<img src="https://source.unsplash.com/random">
</div>
<h1 style="text-align:center;margin:0px;">
<a href="mailto:Email@domain.com" style="color: #D08242" target="_top">Email</a></h1>
<p style="text-align:center;margin:10px 0px; "><font color=B5B5B5>Phone Number</font>
<p style="text-align:center;margin:10px 0px;"><i>Tagline</i></p>
</div>

score 0 · Answer 5 · edited Oct 08 '16 at 11:05

0

You can use max-width for <img> element.

section img {
  max-width: 100%;
}

edited Oct 08 '16 at 11:05

Mr Lister

45,515
15
108
150

answered Sep 29 '16 at 01:51

duonghc

1
2

score -1 · Answer 6 · edited Sep 29 '16 at 01:45

-1

You're going to want to take a look at media queries in the Mozilla docs.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

There's a link to help you get a better understanding of it but basically the web content will resize based on the size of the screen.

edited Sep 29 '16 at 01:45

Brett

1,951
2
28
35

answered Sep 29 '16 at 01:24

Jmorel88

66
2
12

HTML/CSS Make image resize on smaller screens

6 Answers6