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.
Related
I have a div with a background-image assigned in the CSS3 file.
The image is responsive, so it scales according to the screen size BUT the container keeps the height at all screen sizes.
I need to know if there is a way to make the container responsive as well as the background image.
HTML:
<div class="responsive> </div>
CSS3:
.responsive {
background: url('https://s20.postimg.org/o09gf7fvx/bag.jpg') no-repeat center top;
border: 1px solid red;
background-size: contain;
width: 100%;
height: 270px;
}
I must use background-image selector and no img src tag.
Here is the fiddle file.
Thank you.
Update - February 3rd, 2021
Since I wrote the original answer a new CSS property has been introduced - 'aspect-ratio' - to solve this problem.
<div id="responsive">some text</div>
CSS:
#container {
width: 100%;
background: hotpink;
aspect-ratio: 100 / 29;
}
At the time of writing this CSS property doesn't yet have widespread browser support.
Working Example: https://jsfiddle.net/fu0nL57t/
Ref: https://web.dev/aspect-ratio/
=====================================================
Original Answer
This can be done an additional dummy element, inside the element you want to keep at a fixed ratio. If you specify a padding-top or padding-bottom as a percentage, that is in terms of the width of the container element, and this then keeps the height of the container element at a fixed ratio.
<div id="responsive">
some text
<div id="dummy"></div>
</div>
CSS:
#responsive {
display: inline-block;
position: relative;
width: 100%;
background: url('https://s20.postimg.org/o09gf7fvx/bag.jpg') no-repeat center top;
background-size: contain;
}
#dummy {
padding-top: 29%;
}
Working Example:
https://jsfiddle.net/098jj61q/
Credits:
http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio
http://alistapart.com/article/creating-intrinsic-ratios-for-video
Yes its correct. According to #Paulie_D, you can't do that with background image.As per your requirement you can do that using img tag only.
What you have to do, without using the div just make the image responsive by treating it as a block element as,
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
or if you insist to use division with background image then cover the backgound image and set min-height as,
div.mydiv {
background:url(background_image.jpg);
background-repeat:no-repeat !important;
background-size: cover !important;
background-position:center center !important;
min-height:300px;
}
how can I solve this image oversize problem in my simple HTML photogallery with finding images in directory by PHP? I can't solve it and it's not visually good. Can you please help me? Screenshot is
Thanks.
Set all of the pictures with the same class, then add an image height to that class and it will set the images to all the same height.
Here is an example that i just made - http://jsfiddle.net/3gd5ooLf/
Im not sure how you are getting the image in PHP so i can't tell you how to set the class without seeing some code.
here's the CSS example:
.height {
height: 100px;
}
This may be a good example to you . Refer to stackoverflow old question too. here is the link:link
.img {
position: relative;
float: left;
width: 100px;
height: 100px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
In your css file, you could add heigth and width property to adjust the images size.
For example:
img {
heigth:200px;
width: auto;
}
will set the heigth to 200px, but will keep the aspect ratio. To have square images, set the width to, for example, 200px
If you prefer, you could set the image to be scrollable when it's too long like so:
img {
height:200px;
width:200px;
overflow: scroll;
}
I'm working on a Tumblr theme and I have an avatar image that is next to the content. However the image is larger than the content and is breaking out of the section. See:
How can I prevent the image from growing beyond the section?
HTML:
<article id="" class="answer">
<section class="question">
<img src="http://33.media.tumblr.com/avatar_75879837bcba_128.png" alt=""><p class="asker">George asked</p><p class="question">This is my question. I want to know what you're going to do about this. Is it a good idea?
</section>
<p>Answer</p>
</article>
CSS:
.question { padding: 0 2em; }
article { margin: 1.5em auto; }
.question img { float: left; }
.question img { width: auto; height: 100%; }
Demo: http://jsfiddle.net/xb0ms51r/
Add .question img {max-width:100%; max-height:100%;} to your CSS in order to make sure it fits in 100% of the constraints of the section while maintaining the ration of the picture.
Simple as that!
The main thing is - you need to do a clear fix, because you set the image to float, try to add the follows into your sheet sheet.
section.question:after {
content: "";
clear: both;
display: table;
}
Updated demo: http://jsfiddle.net/xb0ms51r/1/
You need to set the CSS as follows for the image :
.question img {
float: left;
width: 150px;
height: auto;
}
Set the height to auto will force the image to retain aspect ratio.
Also it may be a good idea to set html width and height in the image tag, this would be overwritten by the CSS, but structurally correct to have
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.
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;