Make images be closer to each other
up vote
1
down vote
favorite
I currently have this code
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
position: relative;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
What I want to achieve is below (image). As you can see, I would like the images to be closer to each other.
Below is my sad attempt of trying to achieve the result
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 140px;
position: relative;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
For specific reasons, I cannot crop the images
Here is the fiddle: https://jsfiddle.net/bhz3kLfj/
html css
add a comment |
up vote
1
down vote
favorite
I currently have this code
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
position: relative;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
What I want to achieve is below (image). As you can see, I would like the images to be closer to each other.
Below is my sad attempt of trying to achieve the result
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 140px;
position: relative;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
For specific reasons, I cannot crop the images
Here is the fiddle: https://jsfiddle.net/bhz3kLfj/
html css
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I currently have this code
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
position: relative;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
What I want to achieve is below (image). As you can see, I would like the images to be closer to each other.
Below is my sad attempt of trying to achieve the result
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 140px;
position: relative;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
For specific reasons, I cannot crop the images
Here is the fiddle: https://jsfiddle.net/bhz3kLfj/
html css
I currently have this code
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
position: relative;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
What I want to achieve is below (image). As you can see, I would like the images to be closer to each other.
Below is my sad attempt of trying to achieve the result
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 140px;
position: relative;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
For specific reasons, I cannot crop the images
Here is the fiddle: https://jsfiddle.net/bhz3kLfj/
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
position: relative;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
position: relative;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 140px;
position: relative;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 140px;
position: relative;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
html css
html css
edited Nov 9 at 4:15
asked Nov 9 at 4:00
eric
5611
5611
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
up vote
1
down vote
accepted
Use image as background like this.
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 150px;
height: 200px;
position: relative;
background-size: 200px auto;
background-repeat: no-repeat;
background-position: center;
}
<div class="all-shirts-wrapper">
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png')"></div>
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png')"></div>
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png')"></div>
</div>
add a comment |
up vote
1
down vote
You can use object-fit: cover
to crop the images from left and right at the width you want (there the images are 225px wide, so let's make them at a width of 170px to remove most of the blanks left and right)
See Fiddle
Yes, this is another option, make sure to check browser support before using caniuse.com/#search=object-fit
– kiranvj
Nov 9 at 4:32
add a comment |
up vote
1
down vote
Here's my solution:
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: absolute;
z-index: 3;
left: 50%;
transform: translateX(-50%);
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 160px;
height: 225px;
position: relative;
overflow: hidden;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
add a comment |
up vote
0
down vote
You could try adding the images as a background to each div. That may allow you to eliminate the white space to the right and left of each image.
<div class="all-shirts-wrapper">
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png)"></div>
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png)"></div>
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png)"></div>
</div>
div {
background-color: indigo;
}
.shirt-container {background-size:contain; background-repeat: no-repeat;}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
height: 200px;
}
.shirt-container {
width: 140px;
position: relative;
}
https://jsfiddle.net/uxwnkets/
add a comment |
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
Use image as background like this.
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 150px;
height: 200px;
position: relative;
background-size: 200px auto;
background-repeat: no-repeat;
background-position: center;
}
<div class="all-shirts-wrapper">
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png')"></div>
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png')"></div>
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png')"></div>
</div>
add a comment |
up vote
1
down vote
accepted
Use image as background like this.
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 150px;
height: 200px;
position: relative;
background-size: 200px auto;
background-repeat: no-repeat;
background-position: center;
}
<div class="all-shirts-wrapper">
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png')"></div>
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png')"></div>
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png')"></div>
</div>
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
Use image as background like this.
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 150px;
height: 200px;
position: relative;
background-size: 200px auto;
background-repeat: no-repeat;
background-position: center;
}
<div class="all-shirts-wrapper">
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png')"></div>
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png')"></div>
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png')"></div>
</div>
Use image as background like this.
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 150px;
height: 200px;
position: relative;
background-size: 200px auto;
background-repeat: no-repeat;
background-position: center;
}
<div class="all-shirts-wrapper">
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png')"></div>
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png')"></div>
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png')"></div>
</div>
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 150px;
height: 200px;
position: relative;
background-size: 200px auto;
background-repeat: no-repeat;
background-position: center;
}
<div class="all-shirts-wrapper">
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png')"></div>
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png')"></div>
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png')"></div>
</div>
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 150px;
height: 200px;
position: relative;
background-size: 200px auto;
background-repeat: no-repeat;
background-position: center;
}
<div class="all-shirts-wrapper">
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png')"></div>
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png')"></div>
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png')"></div>
</div>
answered Nov 9 at 4:21
kiranvj
12.1k23350
12.1k23350
add a comment |
add a comment |
up vote
1
down vote
You can use object-fit: cover
to crop the images from left and right at the width you want (there the images are 225px wide, so let's make them at a width of 170px to remove most of the blanks left and right)
See Fiddle
Yes, this is another option, make sure to check browser support before using caniuse.com/#search=object-fit
– kiranvj
Nov 9 at 4:32
add a comment |
up vote
1
down vote
You can use object-fit: cover
to crop the images from left and right at the width you want (there the images are 225px wide, so let's make them at a width of 170px to remove most of the blanks left and right)
See Fiddle
Yes, this is another option, make sure to check browser support before using caniuse.com/#search=object-fit
– kiranvj
Nov 9 at 4:32
add a comment |
up vote
1
down vote
up vote
1
down vote
You can use object-fit: cover
to crop the images from left and right at the width you want (there the images are 225px wide, so let's make them at a width of 170px to remove most of the blanks left and right)
See Fiddle
You can use object-fit: cover
to crop the images from left and right at the width you want (there the images are 225px wide, so let's make them at a width of 170px to remove most of the blanks left and right)
See Fiddle
answered Nov 9 at 4:25
Plotisateur
363314
363314
Yes, this is another option, make sure to check browser support before using caniuse.com/#search=object-fit
– kiranvj
Nov 9 at 4:32
add a comment |
Yes, this is another option, make sure to check browser support before using caniuse.com/#search=object-fit
– kiranvj
Nov 9 at 4:32
Yes, this is another option, make sure to check browser support before using caniuse.com/#search=object-fit
– kiranvj
Nov 9 at 4:32
Yes, this is another option, make sure to check browser support before using caniuse.com/#search=object-fit
– kiranvj
Nov 9 at 4:32
add a comment |
up vote
1
down vote
Here's my solution:
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: absolute;
z-index: 3;
left: 50%;
transform: translateX(-50%);
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 160px;
height: 225px;
position: relative;
overflow: hidden;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
add a comment |
up vote
1
down vote
Here's my solution:
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: absolute;
z-index: 3;
left: 50%;
transform: translateX(-50%);
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 160px;
height: 225px;
position: relative;
overflow: hidden;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
add a comment |
up vote
1
down vote
up vote
1
down vote
Here's my solution:
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: absolute;
z-index: 3;
left: 50%;
transform: translateX(-50%);
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 160px;
height: 225px;
position: relative;
overflow: hidden;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
Here's my solution:
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: absolute;
z-index: 3;
left: 50%;
transform: translateX(-50%);
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 160px;
height: 225px;
position: relative;
overflow: hidden;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: absolute;
z-index: 3;
left: 50%;
transform: translateX(-50%);
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 160px;
height: 225px;
position: relative;
overflow: hidden;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: absolute;
z-index: 3;
left: 50%;
transform: translateX(-50%);
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 160px;
height: 225px;
position: relative;
overflow: hidden;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
answered Nov 9 at 4:35
Yan
215
215
add a comment |
add a comment |
up vote
0
down vote
You could try adding the images as a background to each div. That may allow you to eliminate the white space to the right and left of each image.
<div class="all-shirts-wrapper">
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png)"></div>
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png)"></div>
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png)"></div>
</div>
div {
background-color: indigo;
}
.shirt-container {background-size:contain; background-repeat: no-repeat;}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
height: 200px;
}
.shirt-container {
width: 140px;
position: relative;
}
https://jsfiddle.net/uxwnkets/
add a comment |
up vote
0
down vote
You could try adding the images as a background to each div. That may allow you to eliminate the white space to the right and left of each image.
<div class="all-shirts-wrapper">
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png)"></div>
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png)"></div>
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png)"></div>
</div>
div {
background-color: indigo;
}
.shirt-container {background-size:contain; background-repeat: no-repeat;}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
height: 200px;
}
.shirt-container {
width: 140px;
position: relative;
}
https://jsfiddle.net/uxwnkets/
add a comment |
up vote
0
down vote
up vote
0
down vote
You could try adding the images as a background to each div. That may allow you to eliminate the white space to the right and left of each image.
<div class="all-shirts-wrapper">
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png)"></div>
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png)"></div>
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png)"></div>
</div>
div {
background-color: indigo;
}
.shirt-container {background-size:contain; background-repeat: no-repeat;}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
height: 200px;
}
.shirt-container {
width: 140px;
position: relative;
}
https://jsfiddle.net/uxwnkets/
You could try adding the images as a background to each div. That may allow you to eliminate the white space to the right and left of each image.
<div class="all-shirts-wrapper">
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png)"></div>
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png)"></div>
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png)"></div>
</div>
div {
background-color: indigo;
}
.shirt-container {background-size:contain; background-repeat: no-repeat;}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
height: 200px;
}
.shirt-container {
width: 140px;
position: relative;
}
https://jsfiddle.net/uxwnkets/
answered Nov 9 at 4:31
Georgia Ferguson
12
12
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53219692%2fmake-images-be-closer-to-each-other%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown