Hey guys so i'm trying to make a responsive image with a img element but the height of the element is not being respected.
I created this example: https://codepen.io/apodacaduron/pen/ExmpzrE?editors=1100
<div class="container" draggable="true">
<div class="image">
<img src="http://t1.gstatic.com/licensed-image?q=tbn:ANd9GcRXn5Ts02SPH0uXL1hglAYHkimX6Hd36zb1nrqjtJD1C0V7hy4QRqu4ldsT_ukVAeCt6Kx43WK8rGZFMla7uhI" />
</div>
<div class="text">
text content <br><br><br><br><br><br>
</div>
</div>
.container {
background: blue;
width: 336px;
height: 383px;
display: flex;
flex-direction: column;
padding: 16px;
}
.image {
height: 100%;
width: 100%;
}
.image > img {
height: 100%;
width: 100%;
object-fit: contain;
}
.text {
width: 100%;
background: green;
}
I would like to make the third card exactly like the second one, where if the text grows (green div) the image gets smaller, but i was not able to achieve this using the img element. (THE IMG ELEMENT SHOULD NOT HAVE A FIXED HEIGHT!)
Does somebody know how to do this?
.flex {
display: flex;
gap: 1rem;
}
.container {
background: blue;
width: 336px;
height: auto;
display: flex;
flex-direction: column;
padding: 16px;
}
.image {
height: 100%;
width: 100%;
}
.cheat-image {
background: url('http://t1.gstatic.com/licensed-image?q=tbn:ANd9GcRXn5Ts02SPH0uXL1hglAYHkimX6Hd36zb1nrqjtJD1C0V7hy4QRqu4ldsT_ukVAeCt6Kx43WK8rGZFMla7uhI') no-repeat center center / contain;
}
.image > img {
height: 100%;
width: 100%;
object-fit: contain;
}
.text {
width: 100%;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="flex">
<div class="container" draggable="true">
<div class="image"></div>
<div class="text">
text content <br><br><br><br><br><br>
</div>
</div>
<br />
<div class="container" draggable="true">
<div class="image cheat-image"></div>
<div class="text">
text contentIf you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice. If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.<br><br><br><br><br><br>
If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.</div>
</div>
<br />
<div class="container" draggable="true">
<div class="image">
<img src="http://t1.gstatic.com/licensed-image?q=tbn:ANd9GcRXn5Ts02SPH0uXL1hglAYHkimX6Hd36zb1nrqjtJD1C0V7hy4QRqu4ldsT_ukVAeCt6Kx43WK8rGZFMla7uhI" />
</div>
<div class="text">
text content If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.<br><br><br><br><br><br>
</div>
</div>
</div>
</body>
</html>
My solution was to set the container of img with min width 0 and min height 0
.image {
min-height: 0;
min-width: 0;
}
.image > img {
height: 100%;
width: 100%;
object-fit: contain;
}
Related
I'm trying to position three images with flexbox inside a container, but the images have a transparent background, that somehow interfere with each other.
Here is the html:
<div className="buttonContainerLeft">
<img className="images" src={player1Dis}></img>
<img className="images" src={player2Dis}></img>
<img className="images" src={player3Dis}></img>
</div>
The css:
.buttonContainerLeft {
border-color: red;
border-style: solid;
position: absolute;
z-index: 1;
width: 25%;
height: 22%;
left: 5%;
top: 38%;
display: flex;
flex-direction: row;
object-fit: contain;
}
.images {
margin-right: -15px;
}
Here is the visual example, without the .images class applied, with it works fine:
What I want is to know if there is a better solution to this problem?
The best solution is using a div container for each image then specify the width for this container and use overflow hidden to remove the transparent background.
<div className="buttonContainerLeft">
<div className="image-container">
<img className="images" src={player1Dis} />
</div>
<div className="image-container">
<img className="images" src={player2Dis} />
</div>
<div className="image-container">
<img className="images" src={player3Dis} />
</div>
</div>
Styles :
.image-container{
display: flex;
align-items: center;
width: 200px; //This can be changed depend on how much of the image you want to be shown
overflow: hidden;
justify-content: center;
}
To fit all the 3 images into the container, just add to the images width: 100%.
Here is a working demo.
I have a square div with a known size.
I want to show an image with an unknown size in it.
I want:
. to use the maximum space in the div to show the image while keeping the size ratio of the image.
. the image to be centered, either horizontally if the image is taller than wider, or vertically if the image is wider than taller.
. I don't want the image to be cropped
. I don't want the image to be stretched and use the whole div
. The image should keep its ratio
I'm fine with either an html img tag or a CSS background image property
I found a solution thanks to #CBroe and his suggestion to use background-size
.container {
width: 100px;
height: 100px;
border: 1px solid black;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.container1 {
background-image: url('http://placehold.it/30x50');
}
.container2 {
background-image: url('http://placehold.it/50x30');
}
.container3 {
background-image: url('http://placehold.it/500x300');
}
.container4 {
background-image: url('http://placehold.it/300x500');
}
<div class="container container1">
</div>
<div class="container container2">
</div>
<div class="container container3">
</div>
<div class="container container4">
</div>
.container {
width: 100px;
height: 100px;
border: 1px solid black;
position: relative;
}
img {
max-width: 100px;
max-height: 100px;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="container">
<img src="http://placehold.it/30x50" />
</div>
<div class="container">
<img src="http://placehold.it/50x30" />
</div>
<div class="container">
<img src="http://placehold.it/500x300" />
</div>
<div class="container">
<img src="http://placehold.it/300x500" />
</div>
I'm trying to put two images side by side and make them responsive. The problem now is, that the second image wraps first and then reacts to the size of the browser.
I want them to stay on the same line (level) and change their size automatically and wrap at a certain point (this part isn't the problem)....
The html:
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="item2.jpg" alt="bag" />
</div>
<div class="itemwrapper">
<img src="item3.jpg" alt="pen" />
</div>
</div>
</div>
The css:
#wrapper {
max-width: 1050px;
margin: 60px auto 60px auto;
background-color: #DDD
}
.itemwrapper {
display: inline;
}
img {
max-width: 100%;
height: auto;
}
use display table to set it side by side and keep it side by side and responsive.
display: table; with table-layout: fixed; will create a fluid layout for child elements with display: table-cell;
this will not only keep them the same width but also keep the containers the same height.
vertical-align: top; will keep them aligned to the top alternatively you can change the vertical position to middle and bottom plus some others.
Any questions just fire away.
#wrapper {
max-width: 1050px;
margin: 60px auto 60px auto;
background-color: #DDD
}
#outer {
display: table;
width: 100%;
table-layout: fixed;
}
.itemwrapper {
display: table-cell;
vertical-align: top;
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="item2.jpg" alt="bag" />
</div>
<div class="itemwrapper">
<img src="item3.jpg" alt="pen" />
</div>
</div>
</div>
if image are same size or same ratio, you may use flex , width and min-width to set a break point:
#outer {
width:70%;/* demo*/
margin:auto;/* demo*/
display:flex;
flex-wrap:wrap;
}
#outer>div {flex:1;}
#outer>div>img {
width:100%;
min-width:200px;/* demo*/
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="http://lorempixel.com/200/100" alt="bag" />
</div>
<div class="itemwrapper">
<img src="http://lorempixel.com/400/200" alt="pen" />
</div>
</div>
</div>
remove or reset to your needs the rules commented with demo.
Thanks for the help, but I'm doing it with a different solution now, whicha friend suggested:
#outer {
position: relative;
width: 50%;
height: 0;
margin: 30px auto 0 auto;
padding-top: 25%;
background-color: #999;
}
.itemwrapper {
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.item2 {
left: 50%;
}
#outer img {
height: 100%;
max-width: 100%;
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="http://lorempixel.com/200/100" alt="bag" />
</div>
<div class="itemwrapper item2">
<img src="http://lorempixel.com/400/200" alt="pen" />
</div>
</div>
</div>
This evokes another problem though. The images arent filling the itemwrappers. I think i need to write some js for this :S.
I want to create the following layout :
Is a stripe of a variable number of images that have various widths and heights, that are:
proportional
scaled at the same height;
and the sum of their widths are equal to the parent width.
***It's kind of complicated to express myself;
I was wondering if it's possible for a block to simulate the img neat proportion behavior when you set a width to a percentage and it calculates the height of it automagically.
I've made up a diagram that maybe explain better what I want to achieve :
I want for the image to have collectively 100% width of the parent element, scaled with at the same height without loosing their proportion.
I've tried various implementations trying to figure out a way in which I can translate compute a percentage height in css that fills all the width for a block, just how the image behaves when there are {width: 100%; height : auto} properties.
So here is what I've got so far :
Strike #1, tried a simple solution
Problem: container height must be predefined.
.container {
width : 100%;
border: 1px solid black;
height: 50px; /* I would like to say here auto */
}
.image-wrapper {
white-space: nowrap;
height: 100%;
max-width: 100%;
border: 1px dashed gray;
}
.image {
height: 100%;
width: auto;
}
<div class="container">
<div class="image-wrapper">
<img class="image" src="http://placehold.it/100x200" />
<img class="image" src="http://placehold.it/300x200" />
<img class="image" src="http://placehold.it/800x400" />
<img class="image" src="http://placehold.it/10x80" />
<img class="image" src="http://placehold.it/800x400" />
</div>
</div>
Strike #2, display: table anyone ?
Problem: Don't even need to mention it, images are cropped the container size doesn't follow its parent size .
.container-wrapper {
width: 40px;
height: 50px;
}
.container {
width : 100%;
border: 1px solid black;
display: table;
height: 100%;
}
.image-wrapper {
display: table-row;
height: 100%;
border: 1px dashed gray;
}
.item {
display: table-cell;
border: 1px solid blue;
width: 100%;
height: auto;
}
.image {
height: 100%;
width: auto;
}
<div class="container-wrapper">
<div class="container">
<div class="image-wrapper">
<div class="item">
<img class="image" src="http://placehold.it/100x200" />
</div>
<div class="item">
<img class="image" src="http://placehold.it/300x200" />
</div>
<div class="item">
<img class="image" src="http://placehold.it/800x400" />
</div>
<div class="item">
<img class="image" src="http://placehold.it/10x80" />
</div>
<div class="item">
<img class="image" src="http://placehold.it/800x400" />
</div>
</div>
</div>
</div>
***I must say that I am looking for a HTML/CSS solution without the involvement of JavaScript code.
Do you have a clue on how can I approach this ?
So a trick I just came up with is to use the automagic scaling of an image to scale the containing filmstrip div, but hide it with opacity (in a real example, I'd use a transparent .png as well). This sets the height of the filmstrip relative to its width. If you want your filmstrip to be 5:4 or 16:9 or whatever, just change the proportions of the .magic image.
The container inside is then set to be absolutely positioned so it inherits the size of the .magic image.
The images themselves are set to take up the full height of the filmstrip, and are given different widths. The actual image is set with background-image which uses background-size: cover and background-position: center to fill the div.
.filmstrip {
width: 100%;
position: relative;
/* just to make it easier to see what's going on */
border: 1px solid red;
}
.magic {
width: 100%;
height: auto;
display: block;
/* we don't actually want to see this, we're just using it for it's ratio */
opacity: 0;
}
.contents {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
.contents .image {
height: 100%;
background-size: cover;
background-position: center;
float: left;
margin-right: 2%;
/* just to make it easier to see what's going on */
border: 1px solid blue;
box-sizing: border-box;
}
.contents .wide {
width: 30%;
}
.contents .narrow {
width: 10%
}
<div class="filmstrip">
<img class="magic" src="http://placehold.it/400x100" />
<div class="contents">
<div class="wide image" style="background-image: url('http://placehold.it/300x100');"></div>
<div class="narrow image" style="background-image: url('http://placehold.it/300x100');"></div>
<div class="wide image" style="background-image: url('http://placehold.it/300x100');"></div>
</div>
</div>
Browser support should be: Chrome 3+, Firefox 3.6+, IE 9+, Opera 10+, Safari 4.1+ which is basically because of the use of background-cover.
Have a look at my stackoverflow 33117027 answer in which I made suggestions about creating a filmstrip. It has a reference to an eleborate Codepen example. You can easily strip/add what you need...
Need to solve this little task:
Center vertically and horizontally IMAGE in DIV.
DIV height must be proportional to width.
DIV width is stretchable (for example 50% of parent div).
IMAGE width and height = auto (it must fill div if its width or height > than div width or height, and have primary size if its < div size, and stay proportional).
I know how to make 2 and 3.
HTML:
<div class="container">
<img src="img.png"/>
</div>
CSS:
.container {
width: 100%;
height: 0;
padding-bottom: 100%;
}
But how to center and middle IMAGE in this DIV?
There is a lot of ways to make 1 task with non proportional and non strechable div.
But I dont know how to make it all in full house of tasks.
Can you help? HTML and CSS may be any.
Did you try :
.container img {
vertical-align : middle
}
? It will verticaly align your image.
Try this:
<style>
.container
{
width :100%;
height :100%;
display :table;
}
.child
{
vertical-align :middle;
display :table-cell;
}
.child img
{
display :block;
width :50%;
margin :0 auto;
}
</style>
<div class="container">
<div class="child">
<img src="img.png"/>
</div>
</div>
Solved it by myself. Check here: http://jsfiddle.net/42trk8ux/17/
HTML:
<div class="width-50">
<div class="parent">
<div class="aspect"></div>
<div class="block">
<div class="tbl">
<div class="tbl-cell">
<img src="img.jpg"/>
</div>
</div>
</div>
</div>
</div>
CSS:
.width-50{
width:50%
}
.parent{
position: relative;
}
.aspect
{
width: 100%;
height: 0;
padding-bottom: 100%;
box-sizing: border-box;
}
.block{
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: block;
}
.tbl{
display: table;
width: 100%;
height: 100%;
position: absolute;
}
.tbl-cell{
display: table-cell;
vertical-align: middle;
text-align: center;
background: #aaa;
}
.tbl-cell img{
max-width:100%;
max-height:100%;
}