Image cannot exceed device width on iPhone 5

1

Hey guys!

I’m a graphic designer working on my portfolio site, hoping to get a front-end developer job with it as a practical showcase. Here’s the link to my site: vinceshao.com

The problem I have is that why images on iPhone 5 cannot exceed its device width, while I set the widths of my images as 200%. It looks as I expected on Chrome’s dev mode, yet not on real device. Though I haven’t tested other devices, I guess other ones with width smaller than 320px would have same problems?

####These are screenshots from iPhone 5

S__4882436.jpg640×1136 52.6 KB
S__4882435.jpg640×1136 59.2 KB

####And these are screenshots from Chrome’s dev mode

Screen Shot 2017-07-13 at 9.32.49 AM.png350×654 22.5 KB
Screen Shot 2017-07-13 at 9.33.06 AM.png337×648 57.5 KB

####Here’s the relevant html snippet

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1">

<div class="landing">
	<div class="landing-container">
		<div class="landing-title-container" >
			<h1 class="landing-title">Let's Make Impacts</h1>
		</div>
		<div class="landing-img-container">
			<img class="landing-img landing-front" src="/materials/landing.png" alt="landing">
		</div>
	</div>
</div>

####Here’s the relevant sass snippet


.landing {	
    width: 100%;
    height: 120vw;

	.landing-container {
		width: 100%;
		height: 100%;
	}

	.landing-img-container {
		height: 120vh;
		width: 100%;
		position: absolute;
		z-index: -1;
		overflow: hidden !important;	
		display: flex;
		justify-content: center;
		align-items: center;
		
		.landing-img {
			width: 200%;
			height: auto;
			display: block;
			margin: auto;					
		}
}

Feel free to check my code with Chrome’s dev mode if these snippets are not thorough enough.

Thanks for your help!!

2

From what I tested in the developer console, adjusting above 100% does not appear to make a difference, I am assuming the CSS Specification does not allow a value above 100%, you’ll need to use media queries and provide a pixel value to accomplish this.

1 Like
3

I’m assuming we’re only talking about the vertical “30”, yes?

A couple things:

  1. It’s huge! :stuck_out_tongue: 5938 × 3229 is much too big for what you’re doing.
  2. It looks like your goal is to have it as a background. Why not just put it in the CSS as a background-image?

I’m guessing number 2 is related to number 1… you wanted to be able to control the dimensions of that image. In this case, CSS has everything you need to get it done.

Start by removing the img tag and .landing-img-container div. Then, try this revised CSS.

.landing {	
    width: 100%;
    height: 120vw;

    .landing-container {
        width: 100%;
        height: 100%;
    
        // change landing image to background and position
        background: url(http://vinceshao.com/materials/landing.png) no-repeat center center;

        // this is where the magic happens
        // if you resize your image and get rid of unneeded transparency, change this to `contain`
        background-size: cover;
    
        // center heading text with some flexbox magic
        display: flex;
        justify-content: center;
        align-items: center;
    }	
}
2 Likes
4

Thanks for your help! I wasn’t considering using pixel value because I want it to be really responsive according to all devices. And the good news is I have solved this problem now! Turns out I it’s related to flex property. Check my reply down there if you’re interested in my solution. Thanks again for your help!!

1 Like
5

Thanks you! I actually thought about setting my images with css to avoid this problem, but there’s lots of images in my site, and I thought it would not be a good way to set all images with background-image…? But the good news is I have solved this problem now! Turns out I it’s related to flex property. Check my reply down there if you’re interested in my solution. Thanks again for your help!!

1 Like
6

It has been solved! Because I use display: flex in .landing-img-container to center my image, it prevents the flex elements from exceeding due to flex-shrink: 1 property by default. Setting it to 0 solves the problem! Here’s the documentation of flex-shrink.

2 Likes