Being a designer today, one of the biggest obstacles of my life today is placing an image on a web page that fits in all browsers on all devices. Just to fit one image I tried to create a code like below and check by height and made sure image fit and image is in the middle of the screen. All I want is to put an image that is 600x894 in the middle of the screen regardless of the device and browser. If the screen size is smaller then image should be smaller as well. What is best way to do this?
img {position:absolute;left:50%;top:50%;display:block;}
#media only screen and (max-height : 600px) {img{width: 389px;height: 580px;margin-left: -194px;margin-top: -290px}}
#media only screen and (max-height : 700px) {img{width: 456px;height: 680px;margin-left: -228px;margin-top: -340px}}
#media only screen and (max-height : 800px) {img{width: 524px;height: 780px;margin-left: -262px;margin-top: -390px}}
#media only screen and (max-height : 900px) {img{width: 591px;height: 880px;margin-left: -295px;margin-top: -440px}}
<style type="text/css">
img{
display: block;
margin: 0 auto;
max-width: 100%;
}
<img src="http://static.jsbin.com/images/dave.min.svg" alt="">
http://jsbin.com/wusoxilero/1
You could do something like the following. Try resizing the browser and look at how it resizes according to the width of the screen and it is always centered.
html, body { height: 100%; width: 100%; margin: 0; }
div {
display: block;
background: red;
height: 100%;
position: relative;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
width: auto;
display: block;
}
<div>
<img src="http://fc06.deviantart.net/fs17/i/2007/149/0/4/fire_wolf_by_frenky666.jpg">
</div>
Related
I have a simple question: How do I make an image properly respond to the viewport?
I have a 400 pixel (400px) wide and tall image, and I'd like it to become only 90% of the viewport width (90vw) when the browser is resized, so here is my current code:
img {
width: 400px;
height: 400px;
}
#media screen and (max-width: 400px) {
img {
width: 90vw;
height: 90vh;
}
}
But the problem is that the image doesn't adjust at all with this current code.
When I put max-width in place of width only the width of the image adjusts while the height does not leaving me with an elliptical and distorted image.
Is there an easy fix to my problem?
Setting both height and width in CSS for an <img> is prone to distorting it. If you don't want that to happen, you should just specify one dimension and set the other to auto. Considering your image is, in fact, 400px × 400px, here's what you should use:
#myImg {
width: 400px;
height: auto;
}
#media (max-width: 440px) {
#myImg {
width: 90vw;
}
}
/* optional, for centering */
#myImg {
display: block;
margin: 0 auto;
}
<img src="http://via.placeholder.com/400x400" id="myImg">
Play with it here. Note I used 440px so there wouldn't be a jump from 400px to 360px when crossing over the 400px device width limit. You can, of course, use 400px if that's what you want.
Try object fit.
img {
width: 400px;
height: 400px;
object-fit: cover;
}
#media screen and (max-width: 400px) {
img {
width: 90vw;
height: 90vh;
}
}
Or for better browser compatibility you can also use a background image instead.
For that you'd need to set two #media queries, one for horizontal, and one for vertical adjustment, both set to 400px. With the horizontal one, you only use the width, and with the vertical one, only the height:
body {margin: 0}
img {
display: block; /* removes bottom margin/whitespace */
}
#media (max-width: 400px) {
img {width: 90%}
}
#media (max-height: 400px) {
img {height: 90vh}
}
<img src="http://placehold.it/400x400" alt="">
The div in question is:
.fixed {
position: fixed;
bottom: 0;
left: 0;
width: 200px;
background-color: white;
}
What I want is:
#media screen and (max-width: 720px){
.fixed { display: none; }
}
However apparently that's not how fixed containers work?
So how can I hide a "sticky" container when the screen gets resized to something too small to display both the container and the main content and thus making the container overlap the content?
Your css code seems to be working fine, perhaps there is a rule that has more importance/weight than the one in your media query, add !importat and see if it works:
#media screen and (max-width: 720px){
.fixed { display: none !important; }
}
I have a website where a simple DIV will be hidden when it's width if overflow'ed.
The problem is on large layouts (1000px+) when there's enough width to show off the left & right side of the div - the content is hidden, yet I want it to show.
http://sadakov.com/
div #timeline #life - the width is enough to show content, yet hidden in the large browser;
Thanks.
Check the section #timeline-section, you have a div .container. The bootstrap container class behaves like follow on medium screen :
#media (min-width: 768px)
.container {
width: 750px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Override the bootstrap with :
#media (min-width: 768px){
#timeline-section .container
{
width:100%;
}
}
First of all, here's the jsfiddle for the particular markup/styling in question.
Main question is why the img and text box (dark_block) do not have the same margin. Both are set to 100% width of the container div, so I'm not sure what's up. Mind taking a look?
Other things I'm still trying to figure out and googling (thus far) has not helped me:
When the text box is in-line (to the left) of the photo container, how do I get it to be the same height as the photo container
If the image's width is smaller than the photo container, how do I get it to center horizontally and vertically?
For accessibility sake, can I just create a non-responsive version of the css before the #media tag stuff?
Sorry, I'm sort of new to web development, and any help would definitely be appreciated. Also if anything in the code fragment seems awfully done, call me out! I'd love to learn some best-practices in addition to solving the issue at hand. Especially display types, having a hard time wrapping my head around 'em.
Appreciate you taking the time to look at this!
John
CODE:
<div id="home_top_container">
<div id="photo_slider">
<img src="redacted">
</div>
<div id="dark_block"></div>
</div>
#home_top_contianer {
width: 100%;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
}
#media screen and (min-width: 800px){
#photo_slider{
float:right;
background-color: #cccccc;
padding: 0px;
width: 69%;
min-width: 500px;
display: inline-block;
}
}
#media screen and (max-width: 799px){
#photo_slider{
float:none;
background-color: #cccccc;
padding: 0px;
width: 100%;
min-width: 500px;
display: inline-block;
}
}
#media screen and (min-width: 800px){
#dark_block {
float:left;
background-color: #383838;
padding: 10px;
width: 28%;
display: inline-block;
}
}
#media screen and (max-width: 799px){
#dark_block {
float:left;
background-color: #383838;
margin-top: 20px;
padding: 10px;
width: 100%;
min-height: 200px;
display: inline-block;
}
}
img {
max-width: 100%;
margin: 0px;
}
You need to read up on the CSS box model. The width of an element refers to its content. The padding, border and margin are then added it to it. That means your #dark_block is actually 100% + 2*10px wide.
The proper solution would be to set #dark_block to display: block and remove both floatand width. The default value for width is auto, which automatically makes the block as wide s possible without overflowing. Rule of thumb in web development: If you give a display: block element width: 100%, then you are doing something wrong.
Another simple solution would be to set box-sizing: border-box; on #dark_block, however box-sizing is a relatively new property, so it won't work if you need to support older browsers.
Getting them to the same height, is not a trivial thing. You could use the display: table-* properties, and give them height: 100% but that requires you to put #dark_block first in the HTML.
Quick example:
<div id="home_top_container">
<div>
<div id="dark_block"></div>
<div id="photo_slider">
<img src="http://caldwellfellows.ncsu.edu/wp/wp-content/uploads/2013/06/Justin-sews.jpg">
</div>
</div>
</div>
#home_top_container > div > div {
display: table-cell;
width: 50%;
border: 1px solid red;
}
img {
width: 100%;
}
Again centering vertically is not a trivial thing in CSS. Your best bet would be to use display: table-cell with vertical-align: middle.
Most certainly. Especially you should move all properties that are common to all media-variants to outside the media rules, so that you don't repeat them.
Also it's no need to repeat the media rules around each rule. Just have one media rule:
#media screen and (min-width: 800px) {
#photo_slider {
/* ... */
}
#dark_block {
/* ... */
}
}
#media screen and (max-width: 799px) {
#photo_slider {
/* ... */
}
#dark_block {
/* ... */
}
}
I am using Bootstrap to create a website that uses the carousel component which takes up a large portion of the page. I am finding that when I resize the browser window and drag the viewport horizontally that the image width becomes skewed and distorted. I have set the following overall CSS styles for my carousel along with media queries for different widths.
Are there any amendments to my CSS rules or properties I can apply to .carousel .item and .carousel img to prevent the width of the image being distorted when the browser window is dragged horizontally? I was thinking width:100%; my possibly resolve this issue?
Here is an image of the skewing occuring when resizing the browser horizontally:
Here is the website: http://www.the-session.co.uk/jen/
Here is the CSS:
.carousel .item {
height: 900px;
}
.carousel img {
min-width: 100%;
height: 900px;
}
#media (max-width: 979px) {
.carousel .item {
height: 500px;
}
.carousel img {
width: auto;
height: 500px;
}
}
#media (max-width: 767px) {
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
}
The problem lies in the fact that you are defining a specific height and/or width (depending on your layout) which is causing the issue. If your design allows for it, change the "height:900px" from .carousel img to "height:auto" in both your #media files so that your image is not being distorted.
If however the desired outcome is to actually have the carousel image expand to fill the whole viewport another solution will be necessary, likely requiring to change the images to background images to fill an absolutely positioned div.
The problem with trying to scale images that way is that you are not preserving the initial aspect ratio of the image.
Instead, try background-size: contain. This instructs the browser to scale the image, proportionately, such that the image will fill the container along the longer axis.
You are setting the wrong values for height in the media queries . Since your img height in main css is set to height:900px; You need to do the following :
#media (max-width: 979px) {
.carousel .item {
height: 750px;
}
.carousel img {
width: auto;
height: 75 0px;
}
}
#media (max-width: 767px) {
.carousel .item {
height: 600px;
}
.carousel img {
height: 600px;
}
}