I am trying to resize my logo image when the user adjusts their browsers width.
<div id="header">
<div class="header_top_section">
<img src="http://carcarlease.com/wp-content/uploads/2014/02/logo3.png" alt="" class="logo"></div>
As you can see I have given my image the class name of "logo".
In my stylesheet I have defined these properties that are supposed to achieve this.
.logo{
max-width: 100% !important;
height: auto !important;
}
However, this has had no effect. You can see the result here: http://www.carcarlease.com
Working Fiddle
img {
max-width: 100%;
height: auto;
}
No need for !important
The code of Jatin works fine in here, or maybe you are looking for this?
Fiddle
img {
width: 100%;
height: auto;
}
Note: I can't view the link you provided due to firewall security.
Related
I have been learning Html and css the past three weeks. I am currently building my own portfolio without any external tools, and I encountered a problem that seems to make no sense whatsoever even after googling for similar responses.
The image found in the code snipper is part of a carousel. I have tested the website both in safari and chrome using both iphone 6 and iphone 11 but there still seems to be a problem. This however does not happen when inspecting element on the browser and setting it the the phone view as seen here:
Before "object-fit:contain" was added, the ".carouselContainer" div itself was already getting extended height. Without "object-fit:contain" it stretches the image vertically (only in actual mobile), however with the div ".carouselContainer" keeps the old height of the image, without stretching the actual image, but leaving a big empty gap as observed here:
The website is online and found here. I am grateful and thank you in advance for your help!
.carousel-container
{
display: inline-block;
width:100%;
min-height: 0%;
margin-top: 0%;
overflow: hidden;
position: relative;
align-items: center;
}
.carousel-container img
{
min-width:100%;
object-fit: contain;
max-height: 100%;
}
.carousel-slide
{
display: flex;
height: 100%;
}
<div class="carousel-container">
<input type="image" src="./images/LeftArrow.png" id="prevBtn"></input>
<input type="image" src="./images/RightArrow.png" id="nextBtn"></input>
<div class="carousel-slide">
<img src="https://img.wallpapersafari.com/desktop/1920/1080/74/99/M67dUT.jpg" alt="">
</div>
</div>
Change the min-width to width inside the carousel-container img css.
Also, you might not need other css in here
.carousel-container img
{
width:100%;
}
I want to display image through CSS. But it is not displaying correctly. Can anyone help me to know that how can we display full size image in our browser without giving dam height property.
Thanks in advance.
Here is my markup:
<div class="Main_Content">
<div class="Slider">
</div>
Here is the CSS (not working)
.Main_Content {
width: 100%;
}
.Slider {
background-image: url("Construction%20Company/Stock%20Images/MG_5194-e1348062448312.jpg");
display: flex;
float: left;
height: 300px;
position: unset;
width: 100%;
}
.Slider {
background-size:cover;
background-repeat:no-repeat;
}
Will do the job. It will try to make the images as big until it reaches fullscreen.
See background-size property on MDN for more details.
Without using height use,
<img>
tag. This will definitely solve your issue.
Apologies if this is obvious, I'm no CSS expert.
When you drop an image directly onto a web browser on any browser, they all implement some sort of "shrink to fit" functionality. Example is this video which shows shrink to fit in action on Firefox:
http://youtu.be/1LW-eByYXik
I want to implement what is shown in the video in my application and have it work cross browser to the greatest extent practical.
Is there a way to do this? Various documents on the web cover some sort of discussion about shrink to fit but none seem to discuss how to implement this for an image across browsers in a consistent manner.
I've looked at the code on the browser when an image has been dropped on and they all seem to take a different approach.
#slaks I have tried your suggestion just then on Chrome and it did not work. Here's the code I tried:
<html>
<head>
</head>
<body>
<style>
img {
width: auto;
height: auto;
max-width: 100%
max-height: 100%
}
</style>
<img src="whn-data/image.png">
</body>
</html>
</head>
This code seems to work:
img {
margin: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-height:100%;
max-width: 100%;
}
JSFiddle
Margin: auto is added to keep the image centered (both horizontal and vertical).
The max-height and max-width limit the image from going bigger than the screen.
BUT this technique has a disadvantage: the default size of your image has to be bigger than the height/width of the browser window or container it is in. If it is not margins will appear on all sides to keep the image's default dimensions.
You're looking for background-size: contain.
(assuming that the image is a background-image)
For an <img> tag, use
width: auto;
height: auto;
max-width: 100%
max-height: 100%
I think what browsers implement in those cases is the property zooom.
I FIGURED IT OUT. Sorry it took me a while. This is actually pretty obvious.
Use this:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
div {
height: 100%;
}
img {
max-width: 100%;
max-height: 100%;
}
JSFIDDLE HERE
I'm trying to scale images to the height of their parent which has a percentage height of its parent. This works as expected except in Chrome where the image won't scale its width proportionally once the height is reduced below the size at which it was first rendered. Any ideas on how to fix this?
<div>
<img src="http://placehold.it/100x100" alt="">
</div>
and the css:
html, body {
height: 100%;
margin: 0;
}
div {
height: 70%;
background-color: red;
}
img {
height: 100%;
width: auto;
}
JSFiddle
Removing the width property fixes this:
img {
height: 100%;
}
I'm not sure why this happens, but I'm guessing that making the width always at auto would fallback to the original width when the image is scaled down (this doesn't happen in most cases I've tried, but a certain combination might trigger it to happen that way). Not sure if it's by design or not, but I'll go ahead and try to report this somewhere.
Fiddle
Try using display: block; to make Chrome scale the image below the rendering-size:
display: block;
min-height: 100%;
height: 100%;
width: auto;
I asked a question about this that was specific to my code and people were really helpful, so I picked the answer that was more susccessful, even though I did not solve my problem.
I am trying to get a large css background just like livingsocial has.
I have an image that is 1400 x 1050
My current resolution is: 1280 X 1024
My image keeps getting cut off from the bottom
Question(s):
Whats the best way to display large image backgrounds using css?
Do I need to have same background image in 4 different resolution and then use the image that best fits the current resolution user is using (is there some script for it)?
Do I need just one big image that I keep scaling using css
How are others tackling this problem?
I'm interested in knowing what is the best way to do this so that it works fine in all resolutions out of the three options above.
CSS3 Solution
You could use background-origin and background-size in CSS3, but it's not supported by IE8 and lower.
PHP Solution
You could GD2 to scale the image specific to the users browser, this solution would also involve JavaScript.
Living Social Way
They're inserting an image with the <img/> tag and positioning it fixed.
<style type="text/css">
#background {
z-index: -1; /* put it under everything*/
position: fixed; /* make it stay in the same place, regardless of scrolling */
top: 0;
left: 0;
overflow: hidden; /* clip the image */
width: 100%; /* fill the full width of browser */
min-height: 950px; /* show at least this much of the image */
}
#background img {
width: 100%;
}
</style>
<body>
<div id="background"><img /></div>
<div id="content"><!-- Your Content Here --></div>
</body>
Living Social has some more code applied to their <img/> tag, but it seems sort of redundant, perhaps it's for better cross-browser support, I didn't show it here.
I am not aware of a CSS method that will achieve crossbrowser background.. that actually works in lower ie versions.
However there are some jquery plugins out there, like this one:
http://srobbin.com/blog/jquery-plugins/jquery-backstretch/
Try specifying the img width and height, then if it's cut on the sides center the image. Otherwise, your image will be cut off depending on the screen size; Or stretched out, if you set the size of it to match the screen size.
Google: css autosize background image
http://css-tricks.com/3458-perfect-full-page-background-image/
I decided to answer this question again, given the different set of requirements, both are valid; however, this one specifically addresses if you DON'T want the image to be cut off at the bottom.
DEMO: http://wecodesign.com/demos/stackoverflow-7082174.htm
<style type="text/css">
#background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
#contentContainer {
position: relative;
width: 500px;
height: 500px;
}
#theContent {
/* this is all pretty much just to make it look good, nothing important in here */
position: absolute;
top: 200px;
left: 200px;
background: #FFF;
width: 80px;
height: 80px;
opacity: 0.7;
border-radius: 6px;
padding: 10px;
}
</style>
<div id="contentContainer">
<img id="background" src="stackoverflow-7082174.jpg" alt="Pretty Background" />
<div id="theContent">This is the content</div>
</div>
I just stripped the code from living social and thought it would be handy if I put it here:
<div id="landing-page-container">
<div id="background-container">
<div>
<img alt="background" id="background" src="files/background.jpg">
</div>
</div>
</div>
<div class="container"></div>
and here is your css:
html {width: 100%; height: 100%}
body {width: 100%; height: 100%}
body, #landing-page-container {width: 100%; height: 100%; background-color: black; z-index: 1}
#background-container {width: 100%; height: 100%; position: absolute}
#background {width: 100%; height: auto; z-index: -100}
and of course you need to supply your background.jpg