I beginning to learn css, and I am writing code based on a course am watching. The author has written the style for left bar images to look like this:
.left-side img{
width: 100%;
height: 100%;
max-width: 140px;
max-height: 140px;
}
What's the use of width: 100% and height: 100%. Removing them seems to not have any effect.
The current image has original size of 32x32 pixels, you can replace the same image with other image of 512x512px,
width: 100% - no matter, what is the actual width of image, stretch it to 100% width of parent container
height: 100%; - no matter, what is the actual height of image, stretch it to 100% height of parent container
max-width: 140px; - if image is big, limit it to this value or if smaller, width100% will stretch it till 140px
max-height: 140px;- if image is big , limit it to this value or if smaller, height100% will stretch it till 140px
.left-side img {
width: 100%;
height: 100%;
max-width: 140px;
max-height: 140px;
}
<h1>image: 32X32</h1>
<div class="left-side">
<img src="https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/instagram-32.png" alt="32X32" title="32X32">
</div>
<hr>
<h1>image: 512X512</h1>
<div class="left-side">
<img src="https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/instagram-512.png" alt="512X512" title="512X512">
</div>
Related
Basically I have an image that needs to stay 100% height no matter the screen size, so its responsive, and its ok to cut off the left and right sides (just not the top and bottom).
I currently have the image set to be responsive for both height and width, but at certain widths and heights it cuts the top and bottom off the image.
Here is my CSS:
.banner{
width:36%;
float:left;
min-height: 100vh;
height: 100%;
}
.banner img {
display: block;
width: 100%;
height: 100vh;
object-fit: cover;
}
PHP (Wordpress):
<div class="banner">
<?php the_post_thumbnail(); ?>
</div>
take away object-fit and change with to auto:
.banner img {
display: block;
width: auto;
height: 100vh;
}
or object-fill, but that can skew the picture, are you sure you don't want it as a background image? https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
I'm working on a project where a div dynamically shrinks as the page shrinks. Unfortunately the div stays the same height this way:
CSS
.container {
min-height: 180px;
max-height: 350px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 350px;
}
HTML
<div class="container"></div>
Instead of fixed height, use em/vh/% units for height depending on what is suitable. You can also use relative height with min-height and max-height to define a range. For example, try resizing the window and see that container always occupies half of available height.
.container {
height: 50vh;
background: green;
}
<div class="container"></div>
I'm trying to place a video into a container which has 100% width and auto height respecting the aspect ratio but with max-height set. I want the video to fill the entire container even if the sides are cropped and to be centered both horizontally and vertically.
I'm using fit-object property but apparently it doesn't work with max-height.
I'll simplify it with an image. The result should be the same.
HTML
<div>
<img src="...">
</div>
CSS
div {
width: 100%;
overflow: hidden;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
}
Now, if I add to div style height: 100px, it works. If I write max-height: 100px, it doesn't. Is this expected behaviour? If so, what can I do to make it work?
Here is jsFiddle: http://jsfiddle.net/1r4mLvLq/
height: 100%; works only if an ancestor element has an explicit height set.
You can accomplish that by adding this CSS:
html, body {
height: 100%;
margin: 0;
}
Updated Fiddle
I would like, using CSS only, to have an image stretch to the max width of a container div, keeping aspect ratio, without using background images. However, if the height of the image exceeds X then it should be limited by that. The following doesn't cause the image to go 100%. If I set that then it becomes stretched if the height exceeds 200px.
.container {
width: 200px;
position: relative;
}
img {
position: relative;
max-width: 100%;
max-height: 200px;
}
<div class="container"><img src=""></div>
Here's a fiddle to play with: http://jsfiddle.net/cyberwombat/agfy1cfm/4/
Try just setting the height:
img {
position: relative;
max-width: 200px;
max-height: 50px
}
where the values of max-width and max-height match the dimensions of the container.
I suggest to use instead this, more flexible:
img {
max-width: 100%;
max-height: 100%;
height: auto;
}
With this, you can use whatever aspect-ratio image you want, being sure that the images will remain responsive
I got a div #header width: 1000px;
#header {
width: 1000px;
margin: auto;
height: 164px;
}
A div #main-container in full-width
#main-container {
height: 278px;
background: url(images/mainbg.png);
width: 100%;
}
But when I resize my window to a size less than 1000px setted on header, the #main-container creates a empty space.
http://tinypic.com/view.php?pic=1zcmmpf&s=5
I want to remove this space, and let the #main-container have full-width
What you are seeing is correct CSS behavior.
For example, consider your HMTL snippet:
<div id="header"></div>
<div id="main-container"></div>
with the following CSS:
body {
margin: 0;
}
#header {
width: 1000px;
margin: auto;
height: 164px;
background-color: yellow;
}
#main-container {
height: 278px;
background: pink url('http://placekitten.com/2000/278') top center no-repeat;
width: 100%;
}
See demo at: http://jsfiddle.net/audetwebdesign/5xwRu/
For pages wider than 1000px, your header is centered as you expect.
Your background image fills up width of the page because the #main-container has 100% width.
As you reduce the page width to less than 1000px, you will see a horizontal scrolling bar appear because the fixed width header is too wide to fit in the view port, which triggers
an overflow condition.
In this situation, the CSS engine creates some white space the right of #main-container since #main-container has a computed width less than 1000px and it fills up the view port width (which is less than 1000px), which does not include the space created for the overflowing content.
You can fix this a number of ways, but it depends in part on what you want to do.
You could set a minimum width as follows:
#main-container {
height: 278px;
background: pink url('http://placekitten.com/2000/278') top center no-repeat;
width: 100%;
min-width: 1000px;
}
See example 2 in the demo fiddle.
Note: You may have a wrapper container to which the CSS property overflow: hidden is applied. If this is the case you may not see a horizontal scrolling bar.