I'd like to know, is it possible to change img dimensions while preserving its responsiveness on browser resize? Applying height and width doesn't work.
.wrap1 {
position: relative;
overflow: hidden;
}
.img1 {
height: auto;
width: 100%;
}
<div class="container-fluid">
<div class="row">
<div class="wrap1">
<img class="img1" src="http://lorempixel.com/600/400" alt="">
</div>
</div>
</div>
Related
Here is a sample image of the layout I am trying to achieve with HTML and CSS:
From what the gallery looks like,
the images are placed in a row
each row fills the width of the container
each image fills the height of the row
The height of each row looks to be slightly different (e.g. min-height: 300px; max-height: 600px;) to accomadate for the different aspect ratios of the image.
I'm trying to build this layout with html and css flexbox, but haven't really gotten too far with it:
.gallery-container {
display: block;
margin: 0 auto;
width: 50%;
}
.gallery-row {
display: flex;
min-height: 300px;
max-height: 500px;
}
.gallery-img {
position: relative;
flex-grow: 1;
max-width: 33.3%;
}
.gallery-img img {
height: 100%;
}
<div class="gallery-container">
<div class="gallery-row">
<div class="gallery-img">
<img src="https://picsum.photos/200/300"/>
</div>
<div class="gallery-img">
<img src="https://picsum.photos/300/200"/>
</div>
<div class="gallery-img">
<img src="https://picsum.photos/400/200"/>
</div>
</div>
<div class="gallery-row">
<div class="gallery-img">
<img src="https://picsum.photos/400/300"/>
</div>
<div class="gallery-img">
<img src="https://picsum.photos/100/200"/>
</div>
<div class="gallery-img">
<img src="https://picsum.photos/300/200"/>
</div>
</div>
</div>
How can I make sure that the images always are on the 'same' width and height, so they are matched in terms of those two? Now the second one is much larger and the boxes don't match up anymore. I need to get a big list with images that I got from someone, and they are not all the same dimensions sadly. The images need to be scaled proportionally
.slider-item {
width: 50%;
display:block;
float:left;
}
.slider-item img {
max-width: 100%;
}
.text {
background-color: grey;
}
<div class="slider-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Shaqi_jrvej.jpg/1200px-Shaqi_jrvej.jpg" alt="product">
<div class="text">
<h3>123</h3>
<h4>23</h4>
<h2>Bonte</h2>
<p>Text</p>
Order
</div>
</div>
<div class="slider-item">
<img src="https://pi.tedcdn.com/r/talkstar-assets.s3.amazonaws.com/production/playlists/playlist_398/reconnect_with_nature.jpg" alt="product">
<div class="text">
<h3>123</h3>
<h4>23</h4>
<h2>Bonte</h2>
<p>Text</p>
Order
</div>
</div>
Set a height and a width to the images. Then apply the object-fit: cover CSS rule on them.
The object-fit CSS property sets how the content of a replaced
element, such as an or , should be resized to fit its
container.
Possible values: contain, cover, fill, none, scale-down
.slider-item {
width: 50%;
display: block;
float: left;
}
.slider-item img {
width: 100%;
height: 10rem;
object-fit: cover;
}
.text {
background-color: grey;
}
<div class="slider-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Shaqi_jrvej.jpg/1200px-Shaqi_jrvej.jpg" alt="product">
<div class="text">
<h3>123</h3>
<h4>23</h4>
<h2>Bonte</h2>
<p>Text</p>
Order
</div>
</div>
<div class="slider-item">
<img src="https://pi.tedcdn.com/r/talkstar-assets.s3.amazonaws.com/production/playlists/playlist_398/reconnect_with_nature.jpg" alt="product">
<div class="text">
<h3>123</h3>
<h4>23</h4>
<h2>Bonte</h2>
<p>Text</p>
Order
</div>
</div>
How to set height and width of an image in html?
But In My view Image looks like this
Here is html code:
HTML
<div class="imgslides">
<div class="slide">
<img src="uploads/pexels-pixabay-415100.jpg" />
</div>
<div class="slide">
<img src="uploads/eric-ward-ISg37AI2A-s-unsplash.jpg" />
</div>
<div class="slide">
<img src="uploads/pexels-helena-lopes-745045.jpg" />
</div>
<div class="slide">
<img src="uploads/pexels-pixabay-38284.jpg" />
</div>
<div class="slide">
<img src="uploads/pexels-visionpic-net-341378.jpg" />
</div>
</div>
Below is the CSS for the html:
CSS
.sliders
{
width:700px;
height: 400px;
overflow: hidden;
}
.show
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.imgslides
{
width: 500%;
height: 100%;
display: flex;
}
Any Suggestion?
You need to set a height and width for the image if you are uploading it in a size that is bigger than you want to show. Be careful, you have the slide class in the html and in the css it says sliders. You could set the size in the outer div and have the image class be:
.imgclass
{
width: 100%;
height: 100%;
}
Just remember it is best practice to serve smaller images for smaller screens
I created a responsive site but some of the images dont resize as I want them to.
See this screenshot:
#img1 {
width: 250px;
height: auto;
margin: auto;
display: block;
background-size: 20%;
}
<div class="row">
<div class="col-md-6" id="mision">
<img src="imagenes/MISION.png" id="img1">
</div>
<div class="col-md-6" id="vision">
<img src="imagenes/VISION.png" id="img2">
</div>
<div class="col-md-12" id="servicios">
<img src="imagenes/SERVICIOS.png" id="img3">
</div>
</div>
You're using a fixed width in the CSS for your image element, try changing to a percentage width, e.g.:
#img1{
width: 80%;
height: auto;
margin: auto;
display: block;
background-size:20%;
}
Then the width of the image should resize with your column.
I am using image width:100% (or 50%) for img, this calculates height automatically. This is ok sometimes, but not in my case.
I need to display two images in a line with the same height, but original images has different height (so in the result two images also have different height).
<div class="col-md-7 horizontal-list-media">
<img src="http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png" style="width: 50%" class="img-responsive">
<img src="http://moneyti.co/wp-content/uploads/2016/01/16-kazino-RUS-360x240.png" style="width: 50%" class="img-responsive">
</div>
As both images have different height, then the resulted images also has different height. I do not wish this. How to make both images the same height? Take in mind that images should be responsive when screen size changes, thus I cannot simply add height property of both images, I guess.
I also cannot change height of original images. I need to make it with css, if not possible - then with jquery.
Basically, you are looking for a way to keep your images in same aspect ration (height is always the same in relation to width). For this, there is a neat little CSS hack using pseudo-element and padding-top. See DEMO for example.
markup:
<div class="col-md-7 horizontal-list-media">
<div class="img-responsive">
<img src="http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png">
</div>
<div class="img-responsive">
<img src="http://moneyti.co/wp-content/uploads/2016/01/16-kazino-RUS-360x240.png">
</div>
</div>
css:
.img-responsive {
width: 100%;
float: left;
position: relative;
overflow: hidden;
}
.img-responsive:before {
display: block;
content: "";
width: 100%;
padding-top: 56.25%; // this makes aspect ratio 16:9, adjust at will
}
.img-responsive img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
#media (min-width: 640px) {
.img-responsive {
width: 50%;
}
}
you can do it like this
var height = $('.image-container').height();
var width = $('.image-container').width();
if (height > width) {
$('.image-container img').css({
width: "auto",
height: "100%"
});
} else {
$('.image-container img').css({
width: "100%",
height: "auto"
});
}
.horizontal-list-media {
overflow: hidden;
}
.image-container {
overflow: hidden;
width: 50%;
/*define your height here*/
height: 100px;
}
.image-container img {
top: 50%;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 horizontal-list-media">
<div class="image-container">
<img src="http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png" style="" class="img-responsive">
</div>
<div class="image-container">
<img src="http://moneyti.co/wp-content/uploads/2016/01/16-kazino-RUS-360x240.png" class="img-responsive">
</div>
</div>
you can do it this way
<div class="col-md-7">
<div class="col-sm-6 bx-img img1"></div>
<div class="col-sm-6 bx-img img1"></div>
</div>
and style is
div.bx-img{
height: 200px;
background-size: cover;
}
.img1{
background: url("http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png") no-repeat scroll 0 0;
}
.img2{
background: url("http://moneyti.co/wp-content/uploads/2016/01/16-kazino-RUS-360x240.png") no-repeat scroll 0 0;
}
or this way
<div class="col-md-7">
<div class="col-md-6 col-sm-6 col-xs-12" style="height:200px;background:rgba(0, 0, 0, 0) url('http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png') no-repeat scroll 0 0 / cover "></div>
<div class="col-md-6 col-sm-6 col-xs-12" style="height:200px;background:rgba(0, 0, 0, 0) url('http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png') no-repeat scroll 0 0 / cover "></div>
</div>
You were almost right. I have modified your code a bit. You have to set height of the parent div. Also use proper floating for positioning.
<div class="col-md-7 horizontal-list-media" style="height: 200px">
<img src="http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png" style="width: 50%;height: 100%; float : left" class="img-responsive">
<img src="http://moneyti.co/wp-content/uploads/2016/01/16-kazino-RUS-360x240.png" style="width: 50%;height: 100%; float : right" class="img-responsive">
</div>
Working example
http://www.bootply.com/rZirK5Z49w