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.
Related
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;
}
In <body> <section> I have background image:
<img src="img/background.png" class="back-img">
css:
.back-img {
width: 100%;
height: auto;
overflow:hidden;
}
like this:
<section>
<div id="topLine">
<img src="img/background.png" class="back-img">
</div>
</section>
I'm trying to align different separate square images of same size horizontally in the center over background image in browser window with position: fixed; to keep it in the center of screen with scrolling and organize vertically on mobile screen:
<img src="img/square1.png" class="image">
<img src="img/square2.png" class="image">
<img src="img/square3.png" class="image">
.css:
.image {
position: fixed;
width: 69px;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
to archive something like this:
Background color implies background picture and white squares is a same size images.
I've tried this example:
<div class="row">
<div class="column">
<img src="img/square1.png">
</div>
<div class="column">
<img src="img/square1.png">
</div>
<div class="column">
<img src="img/square1.png">
</div>
</div>
with:
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
which not organizes images as required in my case and should align pictures in one line, but with position: fixed; I have only one image on screen.
I'm trying to find some correct way to get result, maybe with using of <table>, <tr>, <td> to organize different images according screen size from horizontal to vertical group line automatically with browser window manual narrowing.
First of all, I have to repeat same image in horizontal line in center over background image in fixed position:
Any guide or example would be helpful
CSS grid or flex would be ideal for this (assuming modern-ish browsers).
It's not clear to me why you require an img element for your background image, but I've had plenty of reasons in the past so this would need a little extra to use an img element .
Here is the most basic example of my interpretation of what you're looking for: https://codepen.io/Ilkai/pen/abNdZQK
Basically:
Set up your section with a background-image, and also use it as your source of the container size (full screen with 100 vw/vh)
<section class="bg">
...
</section>
.bg {
background-image: url('...');
background-size: cover;
width: 100vw;
height: 100vh;
}
Create a div that will be dedicated to being your layout parent, with using display: flex/grid (Flexbox is slightly older than Grid, so it has a bit better support). Center children with align-items and justify-content.
<section class="bg">
<div class="layout">
...
</div>
</section>
.bg { ... }
.layout {
width: inherit;
height: inherit;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
You'll also apply your media query to the layout div.
.bg {...}
.layout {...}
#media (min-width: 720px) {
.layout {
flex-direction: row;
}
}
Add your img elements as children of the layout div, size accordingly.
<section class="bg">
<div class="layout">
<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />
</div>
</section>
.bg {...}
.layout {...}
#media (...) {}
.layout img {
width: 6rem;
height: 6rem;
object-fit: cover;
margin: 1rem;
}
If I have misunderstood what you're after let me know in the comments
With position: fixed the images are likely overlapping.
Try wrapping them in a fixed element, and letting them be children in that element, you could then either use display: inline block; text-align: center; or display: flex; justify-content: center; to achieve your goal.
I recommend using flex as you can very easily change this for your mobile CSS.
I have this simple script where i have 2 responsive images. If you minimize the window you will that the images will accordingly.
But i put 2 images in the same div like this:
<div class="wrapper">
<div class="block">
<img
src=
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
></img>
<img
src=
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
></img>
</div>
</div>
i wont take the same effect, WHY?
https://jsfiddle.net/zqgy89k7/
Because you still had a width of 100% per image. Setting the width to 50% makes them scale again. Also set the height to auto to remain proportions.
See example below:
.wrapper {
box-sizing: border-box;
display: flex;
justify-content: center;
border: solid red;
}
.block {
display: flex;
width: 100%;
border: solid blue;
}
.block img {
width: 50%;
max-width: 400px;
height: auto;
}
<div class="wrapper">
<div class="block">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</div>
</div>
You can comment the heigh: 200px line code. And that would be a solution.
Another one is to add flex-wrap: wrap to the flex-father container, and this would be visualy more likely.
Here is the example:
JS Fiddle with responsive images
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...
After searching both Stack Overflow and Google I still wonder how to vertical center a image that is bigger than it's parent element. I use no height, just max-height, because I want to make a responsive solution, without jQuery. If possible.
Here is some code:
<div style="max-height: 425px; overflow: hidden;">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>
to center vertically an bigger image u can use the construction and css bellow
<div class="img-wrapper">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>
And css:
.img-wrapper{
position: relative;
overflow:hidden;
height:425px;
}
.img-wrapper img{
position: absolute;
top:-100%; left:0; right: 0; bottom:-100%;
margin: auto;
}
FIDDLE
I found a way to make it work with only a max-height (as opposed to a fixed height) set on the container.
The bad news is that it requires an additional wrapper element.
HTML:
<div class="img-wrapper">
<div class="img-container">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>
</div>
CSS:
.img-wrapper {
overflow: hidden;
max-height: 425px;
}
.img-container {
max-height: inherit;
transform: translateY(50%);
}
.img-wrapper img {
display: block;
transform: translateY(-50%);
}
If you dont need to use img tags (fiddle):
CSS
.imageContainer {
margin: 0;
height: 200px; /* change it to your value*/
width: 200px; /* or use fixed width*/
background: transparent url('') no-repeat center;
overflow: hidden;
}
HTML
<div class="imageContainer" style="background-image: url('http://deepwish.com/site/wp-content/uploads/2013/10/butterfly2_large.jpg');"></div>
Nowdays you can achieve this by using flexbox:
<div class="container">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>
.container {
overflow: hidden;
max-height: 425px;
display: flex;
align-items: center;
justify-content: center;
}
.container img {
max-width: 100%;
}
View example on CodePen:
https://codepen.io/runonce86/pen/vYrpYvG
Try
<html>
<head>
</head>
<body >
<div style="max-height: 425px;border:1px solid;max-width:500px;overflow:hidden">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg" style='position: relative;top: -231px;left: -500px;'>
</div>
</body>
</html>
if you want to make a responsive image, try using <div style=""> <img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg" width="100%" height="100%"></div>