I'm new to bootstrap and CSS especially something like carousel
so far this is my code
<div class="container">
<div class="row">
<div class="carousel-item <%# Eval("Aclass") %>">
<img class='img-fluid w-100' alt="slide Responsive image" src='<%# Eval("ImageValue") %>' />
<div/>
</div>
</div>
It works well to show the image but the problem come when the image size are different.
Sometimes I have to scroll up and down to scroll for full image, how do I force it to let say 500 x 500 px image no matter what is the original image size is.
I have a solution which help you to solve this issue but after applying this solutions some of your image portion will cut if you are okay with that then bind your image in a div.
Like this example in snippet:
.image_container {
width: 100%;
padding-top: 40%; /*height of the image depands on this*/
overflow: hidden;
position: relative;
}
.image_container img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 100%;
object-fit: cover;
}
<div class="image_container">
<img src="https://i.pinimg.com/originals/1f/87/90/1f8790df8b450fbf5c3b4a6b9db4f822.jpg" alt="image">
</div>
This solution display the center portion of the image and always fill the container and also cut some portion of your image.
Note: please add one extra div class for this, don't consider carousel-item class as an image container.
Related
I'm trying to create a carousel of images inspired on the one in airbnb (https://www.airbnb.it/rooms/5382144?location=Roma%20Termini%2C%20Piazza%20dei%20Cinquecento%2C%20Roma%2C%20RM)
If you use the link above, you will notice the follows:
If you change the WIDTH of your window, the image will resize accordingly
If you change the HEIGHT of your window, the image will also resize accordingly
All the images are resized based on the height of the smallest image. That means that if I have two images, one in landscape and one in portrait, the portrait image will resize to fit the height of the landscape image.
Now, I've been able to achive the number 1 and 2, but I'm struggling to achieve the number 3 using just CSS.
I did a jsfiddle to show you what I'm talking about
https://jsfiddle.net/hvbvhc0q/5/
<div class="container">
<div class="">
<div class="container-img">
<img src="https://a0.muscache.com/im/pictures/67194098/f47fcd01_original.jpg?aki_policy=x_large" style="border: 2px solid blue">
</div>
<div class="container-img">
<img src="https://a0.muscache.com/im/pictures/67194187/634b2de1_original.jpg?aki_policy=x_large" style="border: 2px solid red">
</div>
</div>
</div>
.container-img img {
position: absolute;
max-height: 100%;
left: 0;
right: 0;
margin: 0 auto;
max-width: 100%;
}
If you resize in width or height the preview box, you will notice that everything is perfectly responsive. But the problem is that the portrait image (red border) doesn't fit the landscape image (blu border).
Said in other words: I want to keep the aspect ratio, but I want the portrait image to have the max-height equals to the height of the landscape (but of course without specifing any "fixed" height in px).
Can anyone help me? Thank you so much!
I don't know what do you need, but, try this css code:
.container-img img {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
max-width: 100%;
max-height: 500px; /*change for your necessity*/
}
But if you want to use a carousel component, I suggest for you that you research plugins js for this, like this link: https://github.com/yadhu/airbnb
Ok, I don't now why it works, but I did it!! :D
Here you can find the working fiddle: https://jsfiddle.net/g8t2o9ft/6/
This is the code and css:
<div class="container">
<div class="container-inner">
<div>
<div>
<img src="https://a0.muscache.com/im/pictures/67194046/877580d4_original.jpg?aki_policy=xx_large" style="border: 2px solid blue">
</div>
<div>
<img src="https://a0.muscache.com/im/pictures/67194187/634b2de1_original.jpg?aki_policy=x_large" style="border: 2px solid red">
</div>
</div>
</div>
</div>
img {
position: absolute;
height: 100%;
left: 0;
right: 0;
margin: 0 auto;
max-width: 100%;
}
.container-inner {
position: relative;
padding-bottom: 65%;
}
.container {
max-width: 105vh;
}
As you can see, it's responsive for width (goal 1, easy), it's responive for height (goal 2, thanks to the rule max-width: 105vh) and the two images follow the same height keeping the same aspect ratio (goal 3).
Basically the trick that allows me to achieve the goal 3 is to apply these rules to the parent div:
.container-inner{
position: relative;
padding-bottom: 65%;
}
But I still don't really know why it works (I copied it from airbnb css)
Thank you so much to everyone who answered this question!
It seems you are using bootstrap (correct me if I am wrong). If so use class img-responsive for the img tag as below.
<img class="img-responsive" src="logo.png" alt="logo">
I'm kind of stuck when trying to use this slideshow plugin:
https://github.com/iamvery/galleriffic
I'm using this because it has page pagination.
Anyway,
the problem is the container has to be position: absolute which means I must give it a height so elements below respect its height.
The problem with this is the images. I want them to be responsive.
So basically I'd like to use max-width: 100%;.
The problem is obviously if my container is for e.g 600px high and my images are responsive then my image height will decrease under that 600px and leave white space.
I've tried having img width 100% but fixed height but then they skew as your resize the browser.
I'm not sure if there is a solution.
Any ideas?
Example here:
https://jsfiddle.net/u08vrpt2/
HTML
<body>
<div class="image">
<div class="image__item">
<img src="https://s15.postimg.org/qwsiomo97/test.jpg" alt="test image">
</div>
</div>
</body>
CSS
.image {
position: relative;
max-width: 1200px;
margin: 0 auto;
height: 500px;
background: grey;
}
.image__item {
position: absolute;
top: 0;
left: 0;
}
img {
max-width: 100%;
}
Why the container needs to be absolute?
If we remove that, you still having the same behavior
.image {
position: relative;
max-width: 1200px;
background: grey;
}
img {
max-width: 100%;
display: block;
height: auto;
margin: 0 auto;
}
<div class="image">
<div class="image__item">
<img src="https://s15.postimg.org/qwsiomo97/test.jpg" alt="test image">
</div>
</div>
<p>This text respect the image height</p>
I'm having an issue with one of my joomla website. I'm using sobi to display a map of outlets available in the shopping mall. And I want to make this map responsive. The problem is that this map is an image inserted with css :
HTML :
<div id="system">
<article class="item">
<div class="content clearfix">
<div id="plan-boutiques">
<img src="..."></img> <!-- This is the points on the map not the map -->
</div>
</div>
</article>
</div>
CSS:
#plan-boutiques {
background: url(../images/rom/niveau.png) no-repeat;
position: relative;
display: block;
height: 374px;
width: 685px;
margin: 0 auto;
z-index: 1;
}
Then when I change the width, the image is cropped and not resized as it would be if I had the image in an img tag. I can't change this, the image as to be added with css. I hope there's a way to make it responsive !
Thanks
To make responsive don't apply any fixed with and height. No need to apply width and height. Use this width and height in this way.
#plan-boutiques > img {
width: 100%;
height: auto;
max-width: 685px;
max-height: 374px;
}
Change your #plan-boutiques rule:
#plan-boutiques {
background: url(../images/rom/niveau.png) no-repeat top center / contain;
/* ... */
}
Based on an existing answer, I have managed to centre crop an image. I am having trouble making the centre cropped image responsive, though.
Question
When I reduce the size of the web browser window, the centre cropped image does not scale down nicely. Instead, it maintains it's fixed height and width and spills out of the view-port. The problem is perhaps demonstrated more clearly with a Fiddle.
How can I make the centre cropped image scale down nicely? Ideally the centre cropped image will scale down nicely while still being cropped and maintaining a similar aspect ratio.
.centered-container {
max-width: 960px;
margin: auto;
}
.center-cropped-img {
width: 640px;
height: 360px;
overflow: hidden;
margin: 10px auto;
border: 1px red solid;
position: relative;
}
.center-cropped-img img {
position: absolute;
left: -100%;
right: -100%;
top: -100%;
bottom: -100%;
margin: auto;
min-height: 100%;
min-width: 100%;
}
<div class="centered-container">
<div class="center-cropped-img">
<img src="http://i.imgur.com/Ag2ZCgz.png" alt="" />
</div>
<div class="center-cropped-img">
<img src="http://i.imgur.com/BQUgmlB.png" alt="" />
</div>
</div>
Again, here is a Fiddle that perhaps demonstrates the problem better than in prose.
Read the comments in the code for an explanation.
JSFiddle
HTML
<div class="container">
<img src="http://i.imgur.com/Ag2ZCgz.png" alt="" />
</div>
<div class="container">
<img src="http://i.imgur.com/BQUgmlB.png" alt="" />
</div>
CSS
/*some basic markup for a flexible container to crop the image*/
.container {
width: 80%;
border: 3px red double;
margin: 50px auto;
padding:0;
overflow: hidden;/*do not show image that is overflowing*/
background-color: yellow;
}
.container img {
display: block;
width: 200%;/** (1 / part of the total image width you want shown)*100% In this example you want to show 50% of the image-width**/
margin-left:-50%;/*move the image to the left, removing that content from view (and making content on the right appear). -0% will show the left side of the image. The negative value of the defined width in the rule before this one + 100% will show you the right side of the image. I guess you can figure the rest out by changing this value.*/
margin-top: -25%;/*changing the top and bottom values is a bit of a pain. After some trial and error (in google chrome) it appears they are based on the width of the image container, not the height (how unusual is that!!!). So putting -100% in this value would (re)move the image up by the px value of the width of the #container div. If you are using css sprites you should avoid setting this value other than 0%.
Alternatively do some math on the original dimensions of the image: -(vertical pixels you want off the image)/(image width)* 100% should work for pixel precision).
The good news is that the image scales with the #container div. So the image grows and shrinks with the container showing the exact same part of the image (and not showing more/less content).*/
margin-bottom:-25%;/*(re)move some of the bottom part of the image. See margin-top for more (works identical)*/
}
Use the padding hack.
U need a container, which you set to be a width in percent, height of 0 and padding on the bottom to create the aspect ratio you are looking for.
If you can set your image as a background it's even easier.
I have written a sass mixin for that, and also a small tutorial on my blog which comes with a little more extensive explanation: http://bekreatief.blogspot.ch/2014/09/padding-hack-sass-faux-color-overlay.html
If you need to have your image in an image tag, let me know, it's possible as well, but not as fast
Does adding this (fiddle) to .center-cropped-img achieve what you want? or do you not want to change the area that is being cropped?
max-width: 640px;
width: 100%;
Does this Fiddle do the right cropping?
With the following CSS we can maintain the aspect ratio of the container when resizing the window.
width: 640px;
max-width: 100%;
height: 0;
padding-bottom: 50%; // 320px or lower (half of the width)
The following solution uses CSS background-size property. The image is placed in the background. The <img> tag is used so that search engines can see the image.
/* responsive 40% wide, 4:3 aspect ratio container */
.centered-image {
width: 40%;
padding-top: 30%;
background-position: center center;
/* optional */
margin: 1em auto;
box-shadow: 0 0 .5em .25em black;
}
.centered-image.cropped {
background-size: cover;
}
.centered-image.scaled {
background-size: contain;
background-repeat: no-repeat;
}
/* use your favorite text hiding technique */
.centered-image img {
display: none;
}
/* miscellaneous */
body {
margin: 0;
padding: 0;
}
h1 {
width: 40%;
margin: 1em auto;
font: bold medium monospace;
}
<h1>Cropped to Fit</h1>
<div class="centered-image cropped" style="background-image: url(http://lorempixel.com/400/400/sports/1/);">
<img src="http://lorempixel.com/400/400/sports/1/" width="400" height="400" alt="">
</div>
<div class="centered-image cropped" style="background-image: url(http://lorempixel.com/400/200/sports/2/);">
<img src="http://lorempixel.com/400/200/sports/2/" width="400" height="200" alt="">
</div>
<div class="centered-image cropped" style="background-image: url(http://lorempixel.com/200/400/sports/3/);">
<img src="http://lorempixel.com/200/400/sports/3/" width="200" height="400" alt="">
</div>
<h1>Scaled to Fit</h1>
<div class="centered-image scaled" style="background-image: url(http://lorempixel.com/400/400/sports/1/);">
<img src="http://lorempixel.com/400/400/sports/1/" width="400" height="400" alt="">
</div>
<div class="centered-image scaled" style="background-image: url(http://lorempixel.com/400/200/sports/2/);">
<img src="http://lorempixel.com/400/200/sports/2/" width="400" height="200" alt="">
</div>
<div class="centered-image scaled" style="background-image: url(http://lorempixel.com/200/400/sports/3/);">
<img src="http://lorempixel.com/200/400/sports/3/" width="200" height="400" alt="">
</div>
I have tried with a script. I simply created a function and called on loading and re-sizing.
jQuery
$(document).ready(function () {
heightMan();
$(window).resize(function () {
heightMan();
});
});
function heightMan() {
var winHeight = $(window).height();
var winHeight_50 = (winHeight / 2) - 20;
var container_node = $('.center-cropped-img');
var container_height = container_node.height();
container_height = winHeight_50;
container_node.css('height', container_height);
}
CSS Changes
.center-cropped-img {
width: 64%;
overflow: hidden;
margin: 10px auto;
border: 1px red solid;
position: relative;
}
See in action.
just give width in % instead of px .
.center-cropped-img {
width: 640px;// add in %
height: auto;
overflow: hidden;
margin: 10px auto;
border: 1px red solid;
position: relative;
}
I made an simple layout for an android application using html and css. The hole page has an background image, but i didnt declared it as:
background-image: url(
Because so belong my information i cannot center it?
So that my next plan was to make an simple div that covers the image as you can see here:
<body>
<img src="foto.jpg" class="bg">
<div class="oben">
<h1>Playing Audio</h1>
<button onclick="playAudio('test.mp3')">Play Some Audio</button>
<button onclick="playAudio('test2.mp3')">Play Some Audio2</button>
</div>
</body>
My css is the following:
.image{
position: relative;
width: 100%;
}
.oben {
position: absolute;
top: 20%;
left: 0;
width: 100%;
}
SO now back to my actual problem, the image is not streching to the 100% of the viewport instead it is having 100% of its own width, what means around 200px! But i want to strech it all over the page! Thanks!
That's becuase there is no such thing as .image
You should try this
img.bg{
position: relative;
width: 100%;
}