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>
Related
I am trying to insert some images and add nameplates over them. Images can be vertical, horizontal, and square. They are static and added manually.
What I expect:
long images are scaled to fit max-750px wide parent
tall images are scaled to be no more than 80vh, otherwise fit parent width
nameplates always cover 100% of image width
Exactly how it should look. Blue is article, parent, 1000px wide. Red frames are containers .art, orange is img, black is span with plain text.
What I made so far.
Html:
<div class="art">
<img src="./some/path">
<span>Image name</span>
</div>
Css (scss):
.art {
max-width: 75%;
margin: 0 auto;
position: relative;
img {
object-fit: contain;
width: 100%;
max-height: 80vh;
}
span {
box-sizing: border-box;
position: absolute;
left: 0;
width: 100%;
bottom: 1rem;
padding: 1rem;
background-color: rgba(0,0,0,0.85);
}
}
Problem: works for long images, does not for tall. Nameplates stick outside of image.
Please, check this code. Here is your solution.
add a DIV for Image parent and also add CSS for this.
.art {
max-width: 75%;
margin: 0 auto;
position: relative;
text-align:center;
}
.art-container{
display:inline-block;
position:relative;
}
img {
object-fit: cover;
height: 80vh;
max-width:100%;
}
span {
box-sizing: border-box;
position: absolute;
color:white;
left: 0;
width: 100%;
bottom: 1rem;
padding: 1rem;
background-color: rgba(0,0,0,0.85);
}
}
<div class="art">
<div class="art-container">
<img src="https://i.pinimg.com/originals/af/8d/63/af8d63a477078732b79ff9d9fc60873f.jpg">
<span>Image name</span>
</div>
</div>
<!-- https://cdn57.androidauthority.net/wp-content/uploads/2015/11/00-best-backgrounds-and-wallpaper-apps-for-android.jpg -->
I am trying to align these 3 images, and i have run out of ideas. The blue and orange images don't align at the bottom, it happens with default container width as well as when you squeeze the browser window.
Original size of the blue image is 925 x 1280, green and orange 1280 x 853.
One of my ideas is that images resolution is a problem itself, is it possible?
It's just a small part of the page, so I don't want to use grid, because it would interrupt the whole responsiveness mechanics i think.
.container {
max-width: 1100px;
margin: auto;
overflow: hidden;
}
.images {
position: relative;
box-sizing: border-box;
overflow: hidden;
}
.right {
width: 50%;
float:right;
}
.right img {
padding: 10px;
box-sizing: border-box;
width: 100%;
display: block;
}
.left {
box-sizing: border-box;
width: 50%;
padding: 10px;
display: inline-block;
float: left;
}
<div class="container">
<div class="images">
<img src="blue.jpg" class="left">
<div class="right">
<img src="green.jpg">
<img src="orange.jpg">
</div>
</div>
</div>
Are you avoiding using display:flex?
<div class="container">
<div id="bigimage"><img src="BIGIMAGE"></div>
<div class="smallcontainer">
<div id="smallleft"><img src="smallerleft"></div>
<div id="smallright><img src="smallerright"></div>
</div>
</div>
.container{
width: /*same width as big image*/;
}
#bigimage{
width:100%;
}
.smallcontainer{
width: /*same width as bigimage*/;
}
#smallleft{
width:50%;
}
#smallright{
width:50%;
}
somthing like this?
also you'll have to set the height of the 2 bottom images if you want them flush, but that would scale them funny. I would just resize in photoshop tbh.
Please put all the 3 images in one div the use on the div as shown below :
text-align : block;
You should fix images height and make:
right image height = 1/2 left image height.
Example:
.images > img {
height: 400px; // left image height;
}
.right img {
height: 200px; // tight images height;
}
To avoid stretching images you should remove: width: 100% from right images and add width: auto to left image.
You'll end up with expected result but with more spaces between images because of resolutions of images.
.container {
max-width: 1100px;
margin: auto;
overflow: hidden;
}
.images {
position: relative;
box-sizing: border-box;
overflow: hidden;
}
.images > img {
height: 400px;
width: auto;
}
.right {
width: 50%;
float: right;
}
.right img {
padding: 10px;
box-sizing: border-box;
display: block;
height: 200px;
}
.left {
box-sizing: border-box;
width: 50%;
padding: 10px;
display: inline-block;
float: left;
}
<div class="container">
<div class="images">
<img src="http://ejad.solutions/cloud/left.jpg" class="left" />
<div class="right">
<img src="http://ejad.solutions/cloud/right1.jpg" />
<img src="http://ejad.solutions/cloud/right2.jpg" />
</div>
</div>
</div>
To remove spaces between right and left edit .right and make it:
.right {
width: 50%;
float: left;
}
Why not try to use Flex.
Change the container display to Flex, Flex direction to Column and it should work...
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>
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%;
}