I'm trying to get my logo to become responsive.
Here's a fiddle, and the logo there IS responsive, but on my local machine it's not responsive...
https://jsfiddle.net/jfzqbshs/
Here's a GIF showing my local machine
GIF
HTML
<div class="header">
<img id="logo" src="assets/logo.png">
</div> <!--/ header -->
CSS
.header{
width:100%;
box-sizing: border-box;
padding-left: 1%;
padding-top:1%;
padding-bottom: 1%;
border-bottom: 1px solid #474547;
}
#logo {
display: block;
max-width: 100%;
height: auto;
}
Thank you.
Your image is rather small, so it will never reach the 100% width if you use max-width.
You can use something like this:
#logo {
width: 25%;
min-width: 100px;
height: auto;
}
That makes it responsible (25% width), but also limits it so it never gets smaller than 100px width. You could also add a max-width (in pixels) to avoid that it gets bigger than it actually is (which would result in a blurry image at bad quality)
.header {
width: 100%;
box-sizing: border-box;
padding-left: 1%;
padding-top: 1%;
padding-bottom: 1%;
border-bottom: 1px solid #474547;
}
#logo {
width: 25%;
min-width: 100px;
height: auto;
}
<div class="header">
<img id="logo" src="http://placehold.it/200x60/eb7">
</div>
<!--/ header -->
Do You use bootstrap or other CSS library? Maybe Your img is overwritten somewhere in Your code?. Try this to check:
.header img {
display: block;
max-width: 100%;
height: auto;
}
or even:
img {
display: block;
max-width: 100%;
height: auto;
}
and put in on bottom of CSS file.
Related
I'm trying to build an info card where if the screen is large, you'd have an image filling the left half of the card and text on the right and if the screen is small you'd have the picture on the top and text on the bottom. I was able to do the first part by adding position: absolute;top: 0;left: 0;bottom: 0;width: 40%, and the setting background-image: src;background-size: cover; and then setting margin-left: 40% on the content. But ultimately this makes it hard for a structure like this to adapt to screen sizes without some javascript. I'd like to avoid using js as much as possible for this so I looked for solutions online and came upon answers such as using a flexbox and using the object-fit css property, but none of those really worked. Here's my code:
.signup-form-wrapper {
display: flex;
align-items: center;
height: 400px;
width: auto;
border: 1px solid rgb(200, 200, 200);
margin: 10px 0px;
}
.img-wrapper {
height: 100%;
width: 50%;
}
.img-wrapper img {
display: block;
max-width: 100%;
height: auto;
}
.content-wrapper {
display: inline-block;
max-width: 60%;
text-align: center;
padding: 0px 14%;
}
body {
height: 100%;
width: 100%;
}
<body>
<div class='signup-form-wrapper'>
<div class='img-wrapper'>
<img src='http://www.parkermeridien.com/media/pool_fashion_f.jpg' />
</div>
<div class='content-wrapper'>
<p>Hello, World!</p>
</div>
</div>
</body>
You were on the right track!
Media queries (which you experimented with) are the right way to do this without JavaScript. I went back to using a background-image instead of an img - here's a simple way to do this using floating to keep the elements side-by-side, with a media query (at the bottom of the CSS) that turns off the floating so the elements stack.
I also added box-sizing: border-box; for all elements to prevent padding/borders from modifying the size of elements (which is good practice).
body {
height: 100%;
width: 100%;
}
* {
box-sizing: border-box;
}
.signup-form-wrapper {
height: 350px;
border: 1px solid rgb(200, 200, 200);
margin: 10px 0px;
}
.img-wrapper {
height: 100%;
width: 40%;
float: left;
background-image: url('http://www.parkermeridien.com/media/pool_fashion_f.jpg');
background-size: cover;
}
.content-wrapper {
float: left;
width: 60%;
text-align: center;
padding: 0px 14%;
}
#media (max-width: 768px) {
.img-wrapper,
.content-wrapper {
width: auto;
float: none;
height: 175px;
}
}
<body>
<div class='signup-form-wrapper'>
<div class='img-wrapper'>
</div>
<div class='content-wrapper'>
<p>Hello, World!</p>
</div>
</div>
</body>
Im sure this is really easy but i have been looking at this issue for a little while and my brain has gone blank. I have a div that then has an image inside of it. The image seems to just overflow the div border and its driving me mad. I have an image below to show you what is happening along with the css.
#avatar {
float: left;
width: 50%;
height: 300px;
border: 1px solid black;
}
#avatar img {
width: 100%;
height: auto;
}
<div id="avatar">
<img src="http://i.imgur.com/dkzoNCc.png"></div>
I have a border on the main div #avatar just so i can see the whole size of the div. All i want is for the image to scale to the size of the div. If i set the height to 100% it goes into the div just fine but when resizing it it starts to overflow the div. I want the image to resize on the width not height.
Am i missing something really simple here? I dont want to use overflow hidden on the image as that will just cut some of it off i believe.
Thanks everyone
Try below css for img.
use height: 100%; for maximum height
display: block;margin: auto; for centering
max-width: 100%; to fit large images
Please check the example with large and small images.
#avatar {
float: left;
width: 50%;
height: 300px;
border: 1px solid black;
}
#avatar img {
height: 100%;
max-width: 100%;
display: block;
margin: auto;
}
<div id="avatar">
<img src="http://www.baraodasfestas.com.br/Assets/Produtos/SuperZoom/0431_MICKEY_635703672330071491.jpg" alt="">
</div>
<div id="avatar">
<img src="https://upload.wikimedia.org/wikipedia/en/d/d4/Mickey_Mouse.png" alt="">
</div>
Just add:
#avatar img {
max-width: 100%;
}
#avatar {
float: left;
width: 50%;
height: 300px;
border: 1px solid black;
}
#avatar img {
/*width: 100%;*/
height: auto;
max-width: 100%;
height:100%;
}
<div id="avatar">
<img src="http://i.imgur.com/dkzoNCc.png"></div>
It's because of your height:auto for the <img>
Just use :
#avatar img
{
width: 100%;
height: 100%;
}
But this will stretch you image. So if you want full size image inside your container you need to stretch your container instead. Like
#avatar
{
float: left;
display: inline-block;
width: 50%;
height: auto;
border: 1px solid black;
}
#avatar img
{
width: 100%;
height: 100%;
}
Is this a bug in firefox?
CSS,
html, body {
height: 100%;
margin: 0;
padding: 0 0;
/*border: 4px solid black;*/
}
.container-fluid {
height: 100%;
width: 100%;
display: table;
padding-right: 0;
padding-left: 0;
/*border: 4px solid blue;*/
}
.row-fluid {
height: 100%;
width: 100%;
display: table-cell;
vertical-align: middle;
background-color:#990000;
/*border: 4px solid red;*/
}
.img-container {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
}
.img-container img{
max-width:100%;
max-height:100%;
margin-left: auto;
margin-right: auto;
}
HTML,
<div class="container-fluid">
<div class="row-fluid">
<div class="img-container">
<!-- <img src="http://placehold.it/400x450"> -->
<img src="http://placehold.it/2000x450">
<!-- <img src="http://placehold.it/400x480"> -->
</div>
</div>
</div>
Chrome,
The large image will be scaled down to fit the screen width which is what I want.
Firefox,
The image is not scaled down to fit the screen.
Any ideas how I can fix this?
EDIT:
#-moz-document url-prefix() {
.img-container img {
width: 100%;
max-width: -moz-max-content;
}
}
Since you are using CSS table for the layout already, I'm suggesting this approach without flexbox. It works nicely on Chrome and Firefox according to my tests. I added a div around the img.
jsFiddle
body { margin:0; }
.img-container {
display: table;
table-layout: fixed; /*required for responsive width in Firefox*/
width: 100%; /*required for fixed table layout*/
}
.img-container .image {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 100vh; /*required for responsive height*/
}
.img-container .image img {
max-width: 100%;
max-height: 100%;
vertical-align: middle; /*remove whitespace*/
}
<div class="img-container">
<div class="image">
<img src="http://placehold.it/400x300">
<!-- <img src="http://placehold.it/2000x450"> -->
<!-- <img src="http://placehold.it/400x480"> -->
</div>
</div>
Alternatively, you can use pseudo element :before or :after + inline block for vertical alignment. No markup change is required.
jsFiddle
body { margin:0; }
.img-container {
width: 100vw; /*required for responsive width in Firefox*/
height: 100vh;
text-align: center;
font-size: 0; /*remove whitespace*/
}
.img-container:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.img-container img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
<div class="img-container">
<img src="http://placehold.it/400x300">
<!-- <img src="http://placehold.it/2000x450"> -->
<!-- <img src="http://placehold.it/400x480"> -->
</div>
Yes there is problem in firefox. It will not maintaining aspect ratio. To make it working just add width: 100%; to image will solve issue.
.img-container img {
margin-left: auto;
margin-right: auto;
max-height: 100%;
max-width: 100%;
width: 100%;
}
Working Fiddle
Check same type of issue here.
Edit:
To solve issue for all size image use max-width: -moz-max-content;
#-moz-document url-prefix() {
.img-container img { width: 100%; max-width: -moz-max-content; }
}
Updated Fiddle
Based on a bug report (see below), this is a known issue with Firefox. (Although IE11 also fails to scale the image as desired).
This seems to solve the problem in Firefox:
Instead of:
.img-container img {
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
}
Try this:
.img-container img {
width: 100%; /* adjusted */
height: auto; /* adjusted */
margin-left: auto;
margin-right: auto;
}
DEMO
Another possible solution involves adding table-layout: fixed to the main container (.container-fluid). This method is detailed in this bug report:
Bug 975632 - max-width: 100%; doesn't work inside tables or display: table
'
I am quite new to CSS and HTML to be honest, i've used it before but i'm not too experienced with nesting elements and such, so no doubt i'm doing something wrong here.
i want my header and footer be 10% of the page in height, and the content to be 80%
i have set the width of these elements fine and it all works using percentages, but the height just is not playing ball.
here is my html:
<body id="<%= params[:controller].parameterize %>_controller">
<div class="header">
</div>
<div class="content">
<p>lol</p>
</div>
<div class="footer">
</div>
</body>
Its very basic for the purpose of debugging the problem at hand.
The CSS:
body {
/*light gray */
background-color: #CCCCFF;
height: 100%;
width: 100%;
margin: 0;
}
h1 {
padding-top: 1em;
text-align: center;
}
h3 {
padding-top: 1em;
text-align: center;
}
/* Application layout classes */
.header {
height: 5em;
background-color: #115859;
width: 95%;
margin-right: auto;
margin-left: auto;
}
.footer {
height: 5em;
background-color: #115859;
width: 95%;
margin-right: auto;
margin-left: auto;
}
.content {
height: 50em;
background-color: #000000;
width: 95%;
margin-left: auto;
margin-right: auto;
}
Now the above shows the sizes of each element as expected 5em for header/footer and 50em for the content. I now want these as percentages:
body {
/*light gray */
background-color: #CCCCFF;
height: 100%;
width: 100%;
margin: 0;
}
h1 {
padding-top: 1em;
text-align: center;
}
h3 {
padding-top: 1em;
text-align: center;
}
/* Application layout classes */
.header {
height: 10%;
background-color: #115859;
width: 95%;
margin-right: auto;
margin-left: auto;
}
.footer {
height: 10%;
background-color: #115859;
width: 95%;
margin-right: auto;
margin-left: auto;
}
.content {
height: 80%;
background-color: #000000;
width: 95%;
margin-left: auto;
margin-right: auto;
}
The header and footer are now longer visable and the content is literally a black rectangle roughly 1 row high.
Can anybody see what i am doing wrong?
JSFiffle link: http://jsfiddle.net/4gyh6zcc/4/
You need this piece:
html,body {height:100%;}
updated sample: http://jsfiddle.net/4gyh6zcc/9/
Take a look at this:
Percentage Height HTML 5/CSS
"To set a percentage height, its parent element(*) must have an explicit height. This is fairly self-evident, in that if you leave height as auto, the block will take the height of its content... but if the content itself has a height expressed in terms of percentage of the parent you've made yourself a little Catch 22. The browser gives up and just uses the content height."
Out put
Original Image size : 463px X 339px
I have removed the image due to copy right issues.
HTML
<div class="col-md-4">
<div class="item-block event-details" id="video-container">
<img src="/Resources/images/6b0c5d49-9a76-4a09-afb7-5bfa2ed508f7.jpg" class="img-responsive">
</div>
CSS
.item-block.event-details {
position: relative;
overflow: hidden;
height: 214px;
}
.item-block {
color: #4b4e4e;
border-radius: 4px;
border: 1px solid #d4d4d4;
box-shadow: 0px 1px 1px #b0b6b6;
position: relative;
margin-bottom: 30px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
Question :
Can you tell me why this is happening ? I need to show the whole image on above parent div sizes.But it's not happening.Can you tell me why ?
In other words,image does not fit into the parent div.
If your parent div needs to be that height for some reason, you could set both max-width and max-height to 100%
.img-responsive {
display: block;
margin: 0 auto; /* to center the image horizontally in parent div */
max-width: 100%;
max-height: 100%;
}
I think you should do the opposite in your .img-responsive css class. Let's try that :
.img-responsive {
display: block;
width: 100%;
max-height: auto;
}
Don't need to write
max-width:100%;
If you want image responsive you can write
.img-responsive {
display: block;
width: 100%;
max-height: 100%;
}
if you are using bootstrap then forget about all. you just add the class .img-responsive to img tag.
Demo