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
####And these are screenshots from Chrome’s dev mode
####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-title-container" >
<h1 class="landing-title">Let's Make Impacts</h1>
<img class="landing-img landing-front" src="/materials/landing.png" alt="landing">
####Here’s the relevant sass snippet
overflow: hidden !important;
Feel free to check my code with Chrome’s dev mode if these snippets are not thorough enough.
Thanks for your help!!
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.
I’m assuming we’re only talking about the vertical “30”, yes?
A couple things:
- It’s huge! 5938 × 3229 is much too big for what you’re doing.
- It looks like your goal is to have it as a background. Why not just put it in the CSS as a
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.
// 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`
// center heading text with some flexbox magic
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!!
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!!
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.