My issue is that the child image element must fit to the parent div, but the image's height and width are dynamically set.
.people-image-right-parent { height: 150px; width: 150px;background: #EAEAEA; overflow: auto; }
.people-image-right{ width: 220px;
object-fit: contain;
height: 220px;
background: url(http://ndl.mgccw.com/mu3/000/488/937/sss/68ad9b3f576e42399021560560fb3a16_small.png) -491px -235px;}
<div class="people-image-right-parent">
<img class="people-image-right" />
</div>
The image's height and width are dynamic, not fixed, and it should be in pixels (px). I don't want the image to be scrollable or hidden. It must fit to parent element or must be contained in the parent element.
Please guide me on how to fit the image to its parent div.
Thanks in advance.
try this one
.people-image-right-parent {
height: 150px;
width: 150px;
background: #EAEAEA;
overflow: hidden;
}
.people-image-right {
width: 100%;
object-fit: contain;
height: 100%;
background: url(http://ndl.mgccw.com/mu3/000/488/937/sss/68ad9b3f576e42399021560560fb3a16_small.png) -491px -235px;
}
<div class="people-image-right-parent">
<img class="people-image-right" class="" />
</div>
Is this what you were looking for?
.people-image-right-parent {
height: 150px;
width: 150px;
background: #EAEAEA;
overflow: hidden; /* If needed you can change this
value to "scroll" or "visible". */
}
.people-image-right{
height: inherit; /* If needed you can change these */
width: inherit; /* values to pixel values. */
object-fit: cover;
margin: 0;
}
<div class="people-image-right-parent">
<img class="people-image-right" src="http://ndl.mgccw.com/mu3/000/488/937/sss/68ad9b3f576e42399021560560fb3a16_small.png" />
</div>
Here try with this
If your image is lower(in PX) than your div,you have to use min-width:100% & min-height:100%;
If your image is higher(in PX) than your div,you have to use max-width:100% & max-height:100%;
Here is the example, Your image is higher or lower than the parent div it should fit the parent div.
.people-image-right-parent {
height: 150px;
width: 150px;
background: #EAEAEA;
}
.people-image-right{
height: 350px;
width: 345px;
max-width:100%;
max-height:100%;
min-width:100%;
min-height:100%;
margin: 0;
}
<div class="people-image-right-parent">
<img class="people-image-right" src="http://ndl.mgccw.com/mu3/000/488/937/sss/68ad9b3f576e42399021560560fb3a16_small.png" />
</div>
I don't know if modifying the html is an option but...
You are much better of using an img tag inside the parent div
In the example below, the images are completely dynamic and will adjust to fit the div no matter what the aspect ratio is. it will also never stretch the image.
.people-image-right-parent {
display: inline-block;
width: 150px;
height: 150px;
background: darkred;
line-height: 150px; /* should match your div height */
text-align: center;
font-size: 0;
}
img.people-image-right {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
<div class="people-image-right-parent">
<img class="people-image-right" src="https://unsplash.it/300/300">
</div>
<div class="people-image-right-parent">
<img class="people-image-right" src="https://unsplash.it/100/300">
</div>
<div class="people-image-right-parent">
<img class="people-image-right" src="https://unsplash.it/300/100">
</div>
Edit:
If you can set the height and width of the img inline - even if it's generated dynamically - but cannot control anything else, see the example below. This will work as long as the width and height are declared in px in the img tag whether it's done manually or dynamically.
.people-image-right-parent {
display: inline-block;
width: 150px;
height: 150px;
background: darkred;
line-height: 150px; /* should match your div height */
text-align: center;
font-size: 0;
}
/* demonstration backgrounds */
.bg1 {background: url(https://unsplash.it/500/400);}
.bg2 {background: url(https://unsplash.it/200/600);}
.bg3 {background: url(https://unsplash.it/900/300);}
.people-image-right {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
background-size: contain;
background-position: center;
background-repeat:no-repeat;
}
<div class="people-image-right-parent">
<img class="people-image-right bg1" style="width:300px ;height:300px">
</div>
<div class="people-image-right-parent">
<img class="people-image-right bg2" style="width:100px ;height:300px">
</div>
<div class="people-image-right-parent">
<img class="people-image-right bg3" style="width:300px ;height:100px">
</div>
Related
I'm trying to fill a div with an image while maintaining its aspect ratio. But i do not want to use a background image with background-size: cover or even use the object-fit: cover property, I want the result of them using the img tag.
As you can see in the code below, without using the object-fit: cover or background-size: cover the image is stretched and this is not the result that i want.
.post-thumbnail {
width: 352px;
height: 240px;
overflow: hidden;
}
.post-thumbnail img {
width: 100%;
height: 100%;
}
<div class="post-thumbnail">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKh0q0NzNKTmUA9q-uxaJIRx3pNYgbqzEdGW1cXFdIlZ_SlV-M">
</div>
In the code below the image is not stretched, due to object-fit: cover, i want this same result without using this property, since it does not have a good compatibility. Does anyone know how can i do this?
.post-thumbnail {
width: 352px;
height: 240px;
overflow: hidden;
}
.post-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="post-thumbnail">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKh0q0NzNKTmUA9q-uxaJIRx3pNYgbqzEdGW1cXFdIlZ_SlV-M">
</div>
you could use clip() + position:absolute, or use negative margins along vertical-align and text-align:
.post-thumbnail {
display:inline-block;
width: 352px;
height: 240px;
line-height:240px;
text-align:center;
overflow: hidden;
}
.post-thumbnail.small {
width: 40px;
height: 60px;
line-height: 60px;
}
.post-thumbnail img {
min-width: 100%;
min-height: 100%;
vertical-align:middle;
margin:-500px;
}
/* demo purpose to show what is being hidden;*/
.post-thumbnail {
margin:50px;
overflow: visible;
box-shadow:0 0 0 50px rgba(200,200,200,0.5);
border:solid blue;
}
.post-thumbnail img {
position:relative;
z-index:-1;
}
<div class="post-thumbnail">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKh0q0NzNKTmUA9q-uxaJIRx3pNYgbqzEdGW1cXFdIlZ_SlV-M">
</div>
<div class="post-thumbnail small">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKh0q0NzNKTmUA9q-uxaJIRx3pNYgbqzEdGW1cXFdIlZ_SlV-M">
</div>
You are setting the height property and the width property, that way you are stretching you page. If you only set one, the other one scales with it. Depending on what kind of picture you have and how you want it, you need to set the height and width.
I am working on a website and I want to style an image like you style a background with background-position: center. Is there an equivalent to this for a regular image?
Thanks in advance,
Luuk
EDIT:
The image is responsive and contained in a container.
CSS:
.img-container {
max-height: 300px;
overflow: hidden;
}
.img-container img {
max-height: 100%;
max-width: 100%;
}
I would do something like this to position the image centered.
.img-container {
display: flex;
justify-content: center;
align-items: center;
max-height: 300px;
overflow: hidden;
}
.img-container img {
max-height: 100%;
max-width: 100%;
}
You could go for display flex, but the support for IE is quite disastrous. If you care about browser support (which you should) go for the below example instead.
<div class="list">
<div class="item">
<img src="https://unsplash.it/50/40" alt="">
</div>
<div class="item">
<img src="https://unsplash.it/50/60" alt="">
</div>
<div class="item">
<img src="https://unsplash.it/50/30" alt="">
</div>
<div class="item">
<img src="https://unsplash.it/50" alt="">
</div>
</div>
Sass:
.list {
text-align: center;
}
.item {
position: relative;
display: inline-block;
vertical-align: top;
height: 5rem;
width: 5rem;
background: red;
img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
Make sure to add the prefixes for the transform attribute as well.
Fiddle: https://jsfiddle.net/k433b6up/
Your desired result isn't exactly clear, but here are some options for two different interpretations:
Changing the display property of the image and setting the text alignment to its container will maintain it's native height and width while centering it in the container:
.img-container {
max-height: 300px;
overflow: hidden;
text-align: center;
}
.img-container img {
display: inline-block;
max-height: 100%;
max-width: 100%;
}
Demo: https://jsfiddle.net/5suo8tbw/
If you're trying to achieve a background fill with an img element you should consider using the object-fit: cover attribute. This will always fill your container's dimensions, maintain the image's aspect ratio, and center it in the container.
.img-container {
max-height: 300px;
overflow: hidden;
}
.img-container img {
object-fit: cover;
height: 100%;
width: 100%;
}
Demo: https://jsfiddle.net/5suo8tbw/1/
Here's a link to the spec: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
For cross browser support, check out the polyfill: https://github.com/anselmh/object-fit
object-fit and object-position properties of an img are equivalent to background-size and background-position properties of a block element with background-image, respectively. In the following snippet, please note that the container size is 300px * 300px while the image size is 500px * 300px.
.imageContainer {
margin: 15px;
width: 300px;
height: 300px;
border: 5px solid lightgreen;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
<div class='imageContainer'>
<img class='image'src='https://picsum.photos/500/300' alt='lorem picsum' />
<div>
I have a responsive layout that requires my image heights be constrained to the available window height (minus header). It works fine with just images in a <div>, but if the images are wrapped in an <a> tag the height is no longer constrained. Resizing the browser no longer has an effect on the image, even as it properly sizes the <a>.
How do I constrain the image height within the <a> tag so it doesn't just overflow? I'm using the jquery cycle2 plugin, so a CSS-only solution is strongly preferred to avoid conflicts.
body, html {
width: 100%;
height: 100%;
}
body {
background-color: #CCC;
font-size: 1em;
margin: 0;
padding: 0;
}
header {
background-color: white;
height: 4.5em;
}
#content {
height: calc(100% - 72px);
max-height: 100%;
text-align: center;
}
#inner-content {
max-height: 100%;
height: 100%;
min-height: 100%;
}
.ps-slideshow-container {
background: red;
height: 100%;
}
.cycle-slideshow {
height: 100%;
max-height: calc(100% - 72px);
background: yellow;
position: relative;
}
.cycle-slideshow a {
width: auto;
height: auto;
max-height: 100%;
}
.cycle-slideshow a img {
width: auto;
height: auto;
max-height: calc(100% - 36px);
max-width: 100%;
display: block;
}
.ps-cycle-meta {
background-color: #999;
}
.wrap {
max-width: 960px;
margin: 0 auto;
}
<body>
<header>
<div id="inner-header" class="wrap">Resize does not work</div>
</header>
<div id="content">
<div id="inner-content" class="wrap">
<div class="ps-slideshow-container">
<div class="cycle-slideshow">
<img src="http://malsup.github.io/images/p1.jpg" alt="image1">
</div>
<div id="ps-cycle-nav-1" class="ps-cycle-nav ps-centered">PrevNext</div>
<div id="alt-caption" class="center ps-cycle-meta">Caption</div>
</div>
</div>
</div>
</body>
Working JSFiddle (just <img>)
Non-working JSFiddle (<a><img></a>)
.cycle-slideshow a {
display: block
}
you can't define a max-height for inline-block in this case.
If you set a height:auto property to your link, his height will takes the height of the image inside. So remove this property and set it a height to 100% to fill the container.
.cycle-slideshow a {
display: block;
width: auto;
height: 100%;
}
I have a user uploaded image inside of a div with a fixed width and height. The image inside is aligned to the center vertically. Works fine.
The problem is that sometimes, the height of the image is smaller than the height of the div.
See this jsfiddle for example.
How do I make the image always fit the height of the div and maintain its aspect ratio?
HTML:
<div class="container">
<div class="b_feat_img">
<img src="http://i.imgur.com/iEJWyXN.jpg">
</div>
<div class="b_feat_img">
<img src="http://i.imgur.com/qRkEJni.jpg">
</div>
</div>
CSS:
.container {
width:120px;
}
.b_feat_img {
border: 1px solid green;
background:red;
float: left;
height: 96px;
margin-bottom: 10px;
overflow: hidden;
width: 100%;
}
.b_feat_img img {
height: auto;
position: relative;
top: 50%;
transform: translate(0px, -50%);
width: 100%;
}
In supported browsers*. You can use object-fit with value of cover, it works similarly to background-size:cover, but for inline images.
.b_feat_img img {
object-fit: cover;
height: 100%;
width: 100%;
}
.container {
width: 120px;
}
.b_feat_img {
border: 1px solid green;
background: red;
float: left;
height: 96px;
margin-bottom: 10px;
overflow: hidden;
width: 100%;
}
.b_feat_img img {
object-fit: cover;
height: 100%;
width: 100%;
}
<div class="container">
<div class="b_feat_img">
<img src="http://i.imgur.com/iEJWyXN.jpg">
</div>
<div class="b_feat_img">
<img src="http://i.imgur.com/qRkEJni.jpg">
</div>
</div>
* Note, at the time of writing, IE doesn't support it, be sure to see the support tables.
I have an image wrapper with a maximum height and width constraint (in this example 300x200), and I'm trying to place a fluid image inside the container that respects those constraints.
The width of the image scales as expected, however the image's height always overflows beyond the parent div. What's the proper way to get this image to scale appropriately with CSS alone?
.container {
max-width: 500px;
overflow: hidden;
background-color: #eef;
margin: 0 auto;
}
.figure-image-wrapper {
max-width: 300px;
max-height: 200px;
margin: 0 auto;
}
.figure-image {
max-width: 100%;
height: auto;
}
.figure-caption {
text-align: center;
}
<div class="container">
<figure class="figure">
<div class="figure-image-wrapper">
<img src="//placehold.it/700x700" class="figure-image"/>
</div>
<figcaption class="figure-caption">This is my caption. It's expect to span beyond the width of the image. The image above should scale within a 300x200 .figure-image-wrapper</figcaption>
</figure>
</div>
This should work for you:
.figure-image-wrapper {
max-width: 300px;
max-height: 200px;
margin: 0 auto;
text-align: center;
}
.figure-image {
max-width: inherit;
max-height: inherit;
}
DEMO
Ahah! The trick is to have only the max-height of the image inherit from the parent wrapper:
.container {
max-width: 500px;
overflow: hidden;
background-color: #eef;
margin: 0 auto;
}
.figure-image-wrapper {
max-width: 300px;
max-height: 200px;
margin: 0 auto;
text-align: center; /* Added: Center the image */
}
.figure-image {
max-width: 100%;
/* Removed: height: auto; */
max-height: inherit; /* Added */
}
.figure-caption {
text-align: center;
}
<div class="container">
<figure class="figure">
<div class="figure-image-wrapper">
<img src="//placehold.it/700x700" class="figure-image"/>
</div>
<figcaption class="figure-caption">This is my caption. It's expect to span beyond the width of the image. The image above should scale within a 300x200 .figure-image-wrapper</figcaption>
</figure>
</div>