I am building a full stack,server-side rendered react e commerce app. However since css is my weak point I tried to build product card instead of using library templates. however the issue is I could not figure out how to make img element cover the div. when I place height and width properties img disappears. it might be an easy question for many of you but i could not figure out :(
here is the react component code:
<div className="card-body ">
<div className="card-img-container">
<img src={imageUrl} alt={name} className="card-img" />
</div>
<div className="card-footer">
<span className="name">{name}</span>
<span>
<div className="price-and-dollar">
<span className="dollar-sign">$</span>
<span className="price"> {price}</span>
</div>
</span>
</div>
</div>
here is the css:
.collection-item {
background-color: $gray-700;
display: flex;
flex-direction: column;
width: 23vw;
.card-body {
width: 94%;
}
}
.card-img-container {
height: 100%;
width: 100%;
}
.card-img {
height: 100%;
width: 100%;
}
here is the result
.card-img-container {
height: 100% !important;
width: 100% !important;
}
.card-img {
height: 100% !important;
width: 100% !important;
}
Try this hope it will be helpful
you could try
.card-img-container {
height: 100%;
width: 100%;
}
div.card-img-container > img {
height: 100%;
width: 100%;
}
Related
I want to put three images next together by using flexbox and responsive units in this case percentage(%). I have 2 issues: (1) justify-content does not work because I use % for flex items. (2) The tall of my images are getting bigger than the wide, in other word width and height of my images are not relative together because I used auto keyword for the height of images so I can have width and height relative. I would be very grateful if you could help me. I will include my code below.
.services h2 {
margin: 3.125rem 0 2rem;
}
#services-container {
display: flex;
width: 100%;
}
.service-item {
width: 90%;
height: 65%;
overflow: hidden;
}
.service-item img {
width: 100%;
height: auto;
display: block;
}
<section class="services">
<h2>our services</h2>
<div id="services-container">
<div class="service-item hotel">
<img src="./resources/pictures/hotel.jpg" alt="hotel">
<h4>The best hotels</h4>
</div>
<div class="service-item air-plane">
<img src="./resources/pictures/airplane.jpg" alt="airplane">
<h4>The best airline services</h4>
</div>
<div class="service-item food">
<img src="./resources/pictures/food.jpg" alt="food">
<h4>The highest quality foods</h4>
</div>
</div>
</section>
First, you can set the height to 100% and width to auto and use justify-content on parent like so :
.services h2 {
margin: 3.125rem 0 2rem;
}
#services-container {
display: flex;
width: 100%;
justify-content: space-between;
}
.service-item {
width: 30%;
height: 100%;
overflow: hidden;
}
.service-item img {
width: auto;
height: 100%;
display: block;
}
Hope it helps
It seems so simple, but I wrap my mind about it and googled a lot but couldn't find an answer:
Container with two vertical rows, one has height defined in pixels (header), and the other has image that should stretch as much as remaining height (slider div). The problem is that this height of header is dynamic (as in unknown) and we can't use that value in defining CSS of container or slider div.
How do I solve it without javascript?
<section>
<header style="height:40px; background: yellow;">header</header>
<div id="slider">
<img src="http://amanita-design.net/img/home-news/botanicula.jpg" />
</div>
</section>
section {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 400px;
background: green;
}
#slider {
height: 100%; /* this is wrong; how to set height to stretch element? */
}
img {
width: 100%;
height: 100%;
}
Header is set to 40px just for the sake of the example. It could be any other value, but the CSS definition of other elements shouldn't be aware of that, because it's dynamically loaded 3rd party component with inline CSS.
Also, slider div is a complex slider (Swiper) that renders code with bunch of nested divs but I need to use exactly that one.
But this DOM structure should be rough sketch of my case.
Example is here: https://jsfiddle.net/snaokLxd/3/
Set the parent to flex with #slider set to flex-grow: 1 (or flex: 1 0 0 for short)
section {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 400px;
background: green;
display: flex;
flex-direction: column;
}
#slider {
flex: 1 0 0;
}
img {
width: 100%;
height: 100%;
vertical-align: top;
}
<section>
<header style="height:40px; background: yellow;">header</header>
<div id="slider">
<img src="http://amanita-design.net/img/home-news/botanicula.jpg" />
</div>
</section>
Flex example below:
* {
margin: 0;
}
section {
height: 100vh;
width: 400px;
background: green;
display: flex;
flex-direction: column;
}
#slider {
flex-grow: 2;
}
img {
display: block;
width: 100%;
height: 100%;
}
<section>
<header style="height:40px; background: yellow;">header</header>
<div id="slider">
<img src="http://amanita-design.net/img/home-news/botanicula.jpg" />
</div>
</section>
Also on JSFiddle.
how to add the black bars on my div with 400x400 div size.
if the picture is portrait, it would add black bars on left and right,
and when the picture is widescreen the black bars will be added on top and bottom.
<div>
<img src="image.png" class="img-responsive" />
</div>
I have no sleep for almost 2 days because of this.
I don't understand on this.
this is the sample picture:
please help me
EDIT1:
hello, can you check my html... it should be perfect align, but the picture have different size the alignment broken... look at this.. http://codepen.io/anon/pen/MaorKq
EDIT2
It's already but when the width higher the image pass through
check here: http://codepen.io/anon/pen/EVXMee
Is this what you're looking for?
I've made a pure CSS solution that should work up to IE8. :)
Also, it should work with any width/height.
.image-background {
background: #000;
display: table;
width: 100%;
height: 100%;
position: relative;
}
.image-container {
display: table-cell;
vertical-align: middle;
text-align: center;
margin: auto;
max-height: 100%;
max-width: 100%;
}
img {
display: block;
max-height: 100%;
max-width: 100%;
margin: auto;
}
http://codepen.io/anon/pen/vNZJwe
Good luck!
Your div is 400*400, but your image is small, When you have used img-responsive that means img max-size : 100 %. But here you want to see min-size:100%.
You can try below code
<img src="image.png" class="img-responsive full-width" /> <!--add class full-width-->
in your css file
.full-width{
width:100%;
}
Use below CSS,JS and HTML markup to achive this:
<style>
.img-container {
width: 400px;
height: 400px;
background-color: black;
position:relative;
}
.img-container img {
position:absolute;
top: 50%;
left: 50%;
}
</style>
<script>
$(document).ready(function() {
debugger;
var img = $('.img-container img');
img.css('margin-top', - ($('.img-container img').height() / 2) + 'px');
img.css('margin-left', - ($('.img-container img').width() / 2) + 'px');
});
</script>
<div class="img-container">
<img src="http://www.gstatic.com/webp/gallery/1.jpg" class="img-responsive" />
</div>
Here is a stripped-down version of what #Himechi90 wrote.
If you only need one image instead of a row, basically all you need is:
.image-full-view {
float: none;
padding: 0;
background: #000;
display: table;
width: 100%;
height: 100%;
}
.image-full-view img {
display: block;
max-height: 80vh;
max-width: 100%;
margin: auto;
}
<div class="image-full-view">
<img src="https://media.usfcvast.org/images/cvast-arches/projects/la_mancha/la_motilla_del_azuer/la_motilla_del_azuer_aerial.jpg" alt="" />
</div>
You can use object-fit: contain;
css:
.image-container {
overflow: hidden;
height: 16rem;
background-color: black;
width: auto;
}
.image-item {
object-fit: contain;
height: 100%;
width: 100%;
}
html:
<div class="image-container">
<img class="image-item" src="images/Screenshot(1).jpg">
</div>
I'm trying to set an img width to 100% of it's container, the container changes size based on screen width, when the image is lower than its original size, i want to set the img width to 100%, however when the image-container is larger than the original width of the image, I want th position the image centrally inside of the container.
Any ideas?
.server-listing {
width: 100%;
height: auto;
margin-bottom: 10px;
}
.server-listing .image {
text-align: center;
}
.server-listing .image img {
width: 100%;
height: auto;
}
My current CSS, pretty basic really, I need direction - thanks guys!
<?php foreach($this->model->data['servers'] as $server) { ?>
<div class="server-listing">
<div class="image">
<img src="x.jpeg">
</div>
</div>
<?php } ?>
My phtml page
(NOTE: The image can be literally any size)
max-width is the CSS property you should be using!
.server-listing {
width: 100%;
height: auto;
margin-bottom: 10px;
background-color: lime;
}
.server-listing .image {
text-align: center;
}
.server-listing .image img {
max-width: 100%;
height: auto;
}
<div class="server-listing">
<div class="image">
<img src="http://placehold.it/500" />
</div>
</div>
You probably have to enter fullscreen mode to really play with this!
Please try max-width:100%; instead of width.
The max-width property is used to set the maximum width of an element.
This prevents the value of the width property from becoming larger than max-width.
See how it works for both small and large images:
.server-listing {
display: inline-block;
max-width: 100vw;
height: auto;
}
.server-listing .image {
text-align: center;
margin-bottom: 10px;
background-color: gray;
}
.server-listing .image img {
max-width: 95vw;
height: auto;
}
<div class='server-listing'>
<div class='image'>
<img src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xap1/v/t1.0-1/c0.0.50.50/p50x50/10342461_799073063461766_6339462327156793350_n.jpg?oh=169a0d52644a444c2f723b1d1ec6c64b&oe=558BEB09&__gda__=1435700277_205a1d24a106c52496fe0e3eb20470e6' />
</div>
<div>
<div class='server-listing'>
<div class='image'>
<img src='http://www.zastavki.com/pictures/1680x1050/2010/Animals_Cats_Cat_023761_.jpg' />
</div>
</div>
I think you have to add margin and display:
.server-listing .image img
{
width: 100%;
height: auto;
margin: 0px auto;
display: block;
}
I am testing this problem in the latest version of Safari for Windows 7.
The problem is that this code works in all other browsers BUT safari:
<style type="text/css">
.userImg { height: 100%; width: 100%; }
.imgContainer { height: auto; width: 150px; }
</style>
<div class="imgContainer">
<img id="img" class="userImg" src="TemplateFiles/Hydrangeas.jpg" alt="" />
</div>
Does anyone know of a trick to get this to size the image proportionally in Safari using just CSS?
Thanks!
For those who needs to use height auto and parent of image is set to display: flex, this trick will help.
image { align-self: flex-start; }
If your parent of image has set flex-direction: column, you need to do this instead.
image { justify-self: flex-start; }
Just set only the width on the image. The browser will scale the image proportionally automatically.
.userImg { width: 100%; }
.imgContainer { height: auto; width: 150px; }
For those who needs to use height auto you an also try with this :
.userImg{
object-fit: contain;
}
.userImg { width: 100%; height: auto; }
.imgContainer { width: 150px; }
2019 year.
check maybe the parent element
.imgContainer { display: flex; align-items: stretch}
Try this:
Parent has display:flex
Child has align-self:center
#import url('https://fonts.googleapis.com/css?family=Slabo+27px');
body {
font-family: "Slabo 27px", serif;
}
h2 {
text-align: center;
}
[data-flex] {
display: flex;
width: 80%;
max-width: 800px;
font-size: 1.2rem;
margin: 0 auto;
line-height: 1.5;
}
[data-flex] > img {
margin-right: 2rem;
width: 30%;
}
[data-center] {
align-items: center;
}
[data-flex] div, [data-flex] p {
flex: 1;
}
[data-flex] div {
margin-right: 2rem;
}
[data-flex] div img {
width: 100%;
}
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<h2>By default, images that are flex-children will be their <em>natural</em> height, regardless of their width:</h2>
<div data-flex>
<img src="sophie.jpg" alt>
</div>
<h2>This can be avoided by <em>not</em> specifying a width for the image, but that makes it non-responsive:</h2>
<div data-flex>
<img src="sophie.jpg" alt style="width: auto">
</div>
<h2>Solution 1: apply <code>align-self: center</code> to the image</h2>
<div data-flex>
<img src="sophie.jpg" alt style="align-self: center">
</div>
<h2>Solution 2: apply <code>align-items: center</code> to the flex container</h2>
<div data-flex data-center>
<img src="sophie.jpg" alt>
</div>
<h2>Solution 3: Place the image inside another container, and make <em>that</em> the flex-child</h2>
<div data-flex data-center>
<div>
<img src="sophie.jpg" alt>
</div>
</div>