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
Related
Need the image to fill up the rest of the space in the .container class
I have tried setting the width of the image in CSS to width: 100%, but it gives me this:
Picture 1: https://ibb.co/9yKJgvF
If I remove that attribute, it gives me this:
Picture 2: https://ibb.co/K0HpkvJ
HTML
<header>
<div class="container">
<div id="logo_container">
<h1>Hotel<span>Inn</span></h1>
</div>
<img src="../images/sample1.jpg" alt="Image of Hotel">
</div>
</header>
CSS
header{
width: 100%;
height: 100px;
display: block;
background-color: lightblue;
}
.container{
width: 80%;
height: 100%;
display: block;
margin: 0 auto;
background-color: white;
}
#logo_container{
height: 100%;
display: table;
float: left;
}
#logo_container h1{
display: table-cell;
vertical-align: middle;
}
.container img{
height: 100%;
float: right;
I trying to make it such that the height of the image is the same as that in Picture 2 while the image will fill up the rest of the space until it touches the words 'HotelInn'
first of all dont use float for this purpose use absolute layout
remove float in .img
In .container add
position: relative;
z-index: 0;
In .img add
position: absolute;
width: 100%;
height: 100%;
right: 0;
z-index: 0;
this will strech out the image I suggest to use image according to it.....
if you want to strech out the image with perfect ratio use height : auto
and add overflow : hidden in .container
I did do many searched for this but anything I try is not working. I need the image to fill the height of the div, the extra image can get off to the right. But anything I try is not working... What am I missing? I don't want to see any red in this box but yet keep the proportions of the image. Thank You!
https://jsfiddle.net/rhwx23o4/6/
<figure id="main-img"><img src="http://http://www.kimwilddesigns.com/web-lesson/4-4_start/images/hp_main-img_1.jpg"/></figure>
figure#main-img {
width:100%;
min-height: 200px;
background-color: red;
overflow: hidden;
}
figure#main-img img {
width: 100%;
object-fit: contain;
}
You can use height: 100vh;
https://jsfiddle.net/rhwx23o4/65/
figure#main-img {
width:100%;
height: 100vh;
display: block;
background-color: red;
overflow: hidden;
}
figure#main-img img {
height: 100vh;
object-fit: contain;
}
Just a little bit of work around. On the breakpoint i.e here 840px I gave property display:none to your image and gave outer div background of same image.
NOTE: In media query I had to hard-code the max-width. It won't be same for all images.
figure#main-img {
width: 100%;
min-height: 200px;
background-color: red;
overflow: hidden;
}
figure#main-img img {
width: 100%;
}
#media (max-width: 840px) {
div {
background: url('http://www.kimwilddesigns.com/web-lesson/4-4_start/images/hp_main-img_1.jpg');
height: 200px;
background-size: cover;
background-position: center center;
}
img {
display: none;
overflow: auto;
min-height: 200px;
max-height: 200px;
}
}
figure {
margin: 0px;
}
<figure id="main-img">
<div><img src="http://www.kimwilddesigns.com/web-lesson/4-4_start/images/hp_main-img_1.jpg" /></div>
</figure>
Try this CSS. Is this what you want? I gave the image a display property of block and changed the object-fit to cover instead of contain.
figure#main-img {
width:100%;
min-height: 200px;
background-color: red;
overflow: hidden;
}
figure#main-img img {
display: block;
min-height: 200px;
width: 100%;
object-fit: cover;
}
Check this https://jsfiddle.net/rhwx23o4/76/
Added height="100%" and width="100%" to the image tag
You can just use display: flex; in <figure> like this codepen:
figure#main-img {
width:100%;
min-height: 200px;
background-color: red;
overflow: hidden;
display: flex;
}
Flex has magical powers to adjust content within it.
In case you do not want <figure> to take up whole screen width (which it would being a block element), you can change its display to display: inline-flex; and then add a certain width/max-width to it.
I have the following structure:
<div class="top">
<button class="wrap">
<span class="text">Hello</span>
</button>
</div>
I have the following CSS:
.top{
background-color:yellow;
width: 216px;
height: 70px;
}
.wrap, .text{
width: 100%;
height: 100%;
display: block;
overflow: hidden;
}
I have seen several posts regarding the "span taking the entire width of their parent" and the most popular answer was to make it display: block;
But in this case, it doesn't work. If you inspect, you will see that the span is taking 200px width instead of 216px width (width of button).
How can I fix this problem? Here is the fiddle
There is padding in your .wrap class. Set padding to 0 on your .wrap, .text declaration.
.top {
background-color:yellow;
width: 216px;
height: 70px;
}
.wrap, .text {
padding: 0px; //set padding to 0px
width: 100%;
height: 100%;
display: block;
overflow: hidden;
}
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