So I am building a nav menu that ,when opened, reveals your menu as well as your name, email and your profile picture.The problem I am facing is that when users upload their profile pictures (which often differ in width and height) and using a border radius, I get undesirable results. What would look fine on desktop, looks horrible on mobile.
See code below:
$menu = "<nav id='menu'>
<ul>
<li><table border='0' width='100%%'>
<tr>
<td rowspan='2' style='width:30%;height:100%;padding-bottom:5px;padding-left:5px;'><div style=\"display: inline-block;
width: 100%;
height: 150px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-image:url('" .$mem_avatar."')\"></div></td>
<td style='70%; padding-left:5px;'><ul><li><h2>$mem_name $mem_surname</h2></li><li ><h4>$mem_email</h4></li></ul></td>
</tr>
</table>
I would like to fix it so that when someone uploads their picture, it will display properly on both desktop and mobile platforms.The above will work fine on a picture on desktop but would be terribly squashed on mobile. I have tried using the width: 10vw height:10vw and this would also look fine on desktop but way to small on mobile. When making the value higher, the result would be a reverse, what looks good on mobile would look horrible on desktop
Use Bootstrap, instead of common CSS.
It will provide you, ready-made classes as per your requirements.
In Bootstrap, responsive images automatically adjust to fit the size of the screen.
Create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element.
The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image:
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
Hope it helps you.
Related
I have developed a small website - luxorclub.ru/en. In "Menu" section there's bottles image which is supposed to be 100% with repeat-x. It looks good on desktop but it's not 100% on a smartphone.
This is how it looks on a desktop
And this is how it looks on Galaxy S6
CSS:
#outer-menu-food {
width: 100%;
height: 700px;
background: url('images/menu/menu-bg3.png') repeat-x;
background-position: center;
}
This is because the #outer-menu-food take the width of the viewport and background will stretch only to that point. You might have to restructure everything for your website to display properly on mobile. Like after a particular resolution remove the fixed values you give as width and stuff and consider giving it percentage values.
In short write media queries to get things fixed on mobile device.
I've created two versions of logo, a vertical and a horizontal one, the first for mobile screens, the second for desktop, to swap from one to another I need picture element. Unfortunately I've failed to implement it both in Dreamweaver, and Sublime text editor. The only thing I've noticed after hours of research, is that it only works with dummy images (placehold.it). Even more the problem seems to be the srcset attribute (which fails to display anything, no matter what is the browser), in contrast with the src attribute which seems to display the source image correctly.
Any kind of help would be most appreciated! (code follows)
<picture>
<source media="(min-width:600px)"
srcset="assets/desk/logo horiz.png"/>
<img src="assets/mob/logo vertical.png"/>
</picture>
This is best done with CSS and media queries. In your CSS, first set an image for the mobile version of your logo, then with a media query you override the first logo for different screen widths, like this example uses a different logo when the screen is 641px or wider:
.logo {
height: 50px;
width: 100px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;
}
#media screen and (min-width: 641px) {
.logo {
height: 100px;
width: 200px;
background-image: url(images/logo2.png);
}
}
i have a problem with the images of my slider in the header. Please take a look at the page.
When the screen resolution is too high, the images are getting cut off. Please focus on the first two images. You can test different screen resolutions here. The images look good until 20" Desktop (1600 x 900). When you test 23" Desktop (1920 x 1080), you won't be able to see the bottom of the first and the second car.
Any idea how I could fix it?
If you don't mind SEO for the images, there is another way to display them. Set them as a background-image on .item elements. And remove img tags. Then in css set something like this:
.item {
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
height: 100px;
}
You need to provide a height to elements, so change it to whatever.
I have a background image assigned via background: url(""); to the body element. Now, its a really huge image and I want to focus the view exactly on the middle.
To understand what I want to do, imagine the following: Open an image on a touch-screen device like an iPhone or any Android phone. Now, pinch to zoom in to the center of the image, and imagine that each zoom-level is a different viewport of another device.
I want a specific part of my image to always be in the center. So far, I have tried tried to use background-{size,attachment,position} but couldn't get it right at all.
My current example is at http://dev.dragonsinn.tk - and the CSS is here: http://dev.dragonsinn.tk/themes/dragonsinn/css/main.ws.php
The current image is 1920x1080, so on most screens it will center almost correctly. But my local one is 1024x786 - which looks horrible so far...
What is the needed CSS, to even make an undersized image center? I can use media queries to make it bigger later. For now, I just want to really center it.
The following centres your image and scales it for different viewports.
See this link for more info on the background-size css property.
Also see http://caniuse.com/#feat=background-img-opts for browser support.
body {
background: url("/cdn/theme/images/bg.jpg");
background-color: black;
color: white;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
}
My last question in terms of CSS was this one:
Website background responsive
it was about a responsive background and i got this one fixed after a long research. I tryed to use some of what i learned and got it nearly working as good as i wanted but(!) i messed something up.
<style type="text/css">
.logo {
display: block;
text-align: center;
margin-top:40px;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>
<img src="https://www.google.com.tw/images/srpr/logo11w.png" class="logo"/>
just to keep it simple i put both together. As you may not see in a fiddle or something like this. It is working somehow fine in lower resolutions but if i screenshot it on my 1920x1080 screen and just check the left to the logo and right to the logo difference in photoshop i can clearly see that the difference from the right border to the logo is larger than from the opposite site.
I realy appreciate some ideas!
A combination of max-width: x% and max-height: x% keeps the image in the correct proportions when resizing (Keep the percentage size the same for both).
Making the image display: table allows the flexible width image to be centered with margin: 0 auto
In this example, the image is 400px x 400px with a max-width / max-height set at 40%. This is just to make the re-size obvious for the demo. Open it full screen and re-size the window to see the shrink.
CSS / HTML / Demo
.logo {
display: table;
margin: 40px auto 0;
max-width: 40%;
max-height: 40%;
}
<img class="logo" src="http://www.placehold.it/400">