The image is wider than the surrounding div.
This is for mobil units. The image within the div
has width:auto; and the div holding it is as wide
as the visible area. So if the div is 500px the
image might vary having 1000px or so. But I want
to show the middle part of image only.
Im using an old version of OWL Carousel v1.3.3
<div id="custom-owl-slider" class="owl-slide" data-scroll-speed="2">
<div class="item">
<img src="images/slider/IMG_3455.png" alt="">
</div>
<div class="item">
<img src="images/slider/IMG_771.JPG" alt="">
</div>
<div class="item">
<img src="images/slider/IMG_321.JPG" alt="">
</div>
<div class="item">
<img src="images/slider/IMG_344.jpeg" alt="">
</div>
<div class="item">
<img src="images/slider/IMG_563.jpeg" alt="">
</div>
<div class="item">
<img src="images/slider/IMG_135.jpeg" alt="">
</div>
</div>
Thanks!
FIXED with the following:
#custom-owl-slider .owl-item {
display: flex !important;
justify-content: center !important;
height: auto; /* or other desired height */
overflow: hidden !important;
}
#custom-owl-slider .owl-item img {
flex: none !important; /* keep aspect ratio */
}
try this for img middle
.item > img {
text-align: center;
overflow: hidden;
}
PD: if you want, this code should fit the image on the div
.item > img{
width: 100%;
}
Related
Consider the following code:
.section {
height: 100px;
display: flex;
}
.wrapper {
padding: 20px;
display: flex;
max-height: 100%;
}
img {
max-height: 100%;
}
<div class="section">
<div class="wrapper">
<a href="#">
<img src="https://picsum.photos/300/200"/>
</a>
</div>
<div class="wrapper">
<a href="#">
<img src="https://picsum.photos/200/300"/>
</a>
</div>
<div class="wrapper">
<img src="https://picsum.photos/300/200"/>
</div>
<div class="wrapper">
<img src="https://picsum.photos/200/300"/>
</div>
</div>
The auto sizing div wrapper makes sure the image won't go beyond the section div height (100px), it does its job and the last two images work great. But once an anchor is added it pushes the next image away, something like the anchor width is still the original width of the image instead of the shrunk down width. How do you fix the anchor width too large issue?
I think it should work if you set display: contents; to the anchor links and the wrapper class.
I have a simple slick carousel
<div class="your-class">
<div class="slider">
<img src="assets/img/train.jpg" alt="">
</div>
<div class="slider">
<img src="assets/img/plane.jpg" alt="">
</div>
<div class="slider">
<img src="assets/img/truck.jpg" alt="">
</div>
<div class="slider">
<img src="assets/img/ship.jpg" alt="">
</div>
</div>
.slick-track {
display: flex !important;
}
.slick-slide {
height: inherit !important;
display: flex !important;
justify-content: center;
}
.slider {
max-height: 400px;
}
.slider img {
width: 100%;
height: auto;
}
As you can see I want to change the size of slider to 400px but the image looks flattened. If I remove slider height then the picture is too big with vertical scroll,I need to make img's height be approx 400px. Can you please help what I can do ?
I have multiple images which I want to show using flexbox. But the images leave a gap if the next image cannot fit in the same row.
I want these images to resize accordingly so that there is no gap left.
Example:
HTML:
<div class="ImageContainer">
<div class="ImageBlock">
<img src="https://c4.wallpaperflare.com/wallpaper/246/739/689/digital-digital-art-artwork-illustration-abstract-hd-wallpaper-thumb.jpg"
alt="">
</div>
<div class="ImageBlock">
<img src="https://c4.wallpaperflare.com/wallpaper/410/867/750/vector-forest-sunset-forest-sunset-forest-wallpaper-thumb.jpg"
alt="">
</div>
<div class="ImageBlock">
<img src="https://c4.wallpaperflare.com/wallpaper/500/442/354/outrun-vaporwave-hd-wallpaper-thumb.jpg"
alt="">
</div>
<div class="ImageBlock">
<img src="https://c4.wallpaperflare.com/wallpaper/39/346/426/digital-art-men-city-futuristic-night-hd-wallpaper-thumb.jpg"
alt="">
</div>
</div>
CSS:
.ImageContainer{
margin:40px;
display: flex;
flex-wrap: wrap;
}
.ImageBlock{
margin:10px;
}
.ImageBlock img{
max-height: 250px;
}
You will need to add flex-grow: 1; to the .ImageBlock
This will make the block expand.
.ImageBlock {
margin: 10px;
flex-grow: 1;
}
Then you will have to make the img fill the block with width: 100%;
If you don't want the image to stretch out of proportions, you can use object-fit: cover;.
.ImageBlock img {
max-height: 250px;
width: 100%;
object-fit: cover;
}
Example codepen: https://codepen.io/bj-rn-nyborg/pen/rNMVrVL
I'm trying to have multiple images load from right to left, and have them stay next to one another regardless of screen size.
https://jsfiddle.net/oujzcvaa/
#container {
position: absolute;
top: 0px;
right: 0px;
}
#container img {
float: right;
}
<div id="container">
<img src="http://via.placeholder.com/100x150" alt="1">
<img src="http://via.placeholder.com/200x150" alt="2">
<img src="http://via.placeholder.com/300x150" alt="3">
</div>
End goal is when I scroll on the page it goes through the images right to left.
I've tried:
overflow-x: scroll;
white-space: nowrap;
display: inline-block;
vertical-align: bottom;
but none of them have worked properly.
What I would recommend is to give each image its own individual container (in this case .wrap). Then you can set the position to relative on that, and set the position to absolute on the images.
An absolute positioning on the images allows you to align them hard up against the right with right: 0, while a relative <div> direct parent means that the image's individual .wrap will always occupy 100% of the width of #container (meaning the images will always be on an independent line):
#container > .wrap {
height: 150px;
position: relative;
}
#container > .wrap > img {
position: absolute;
right: 0;
}
<div id="container">
<div class="wrap">
<img src="http://via.placeholder.com/100x150" alt="1">
</div>
<div class="wrap">
<img src="http://via.placeholder.com/200x150" alt="2">
</div>
<div class="wrap">
<img src="http://via.placeholder.com/300x150" alt="3">
</div>
</div>
EDIT:
In order to display the images in one line one the right-hand side, you would benefit from using display: flex. Flexbox makes what you're trying to achieve possible in only a few lines of code, and flex-direction: row-reverse automatically aligns the images to the right:
#container {
display: flex;
flex-direction: row-reverse;
}
<div id="container">
<img src="http://via.placeholder.com/100x150" alt="1">
<img src="http://via.placeholder.com/200x150" alt="2">
<img src="http://via.placeholder.com/300x150" alt="3">
</div>
If you'd like the images to run in the opposite order, you can simply use flex-direction: row in conjunction with float: right:
#container {
display: flex;
flex-direction: row;
float: right;
}
<div id="container">
<img src="http://via.placeholder.com/100x150" alt="1">
<img src="http://via.placeholder.com/200x150" alt="2">
<img src="http://via.placeholder.com/300x150" alt="3">
</div>
Hope this helps! :)
I need to align images like this photo. My code is:
<html>
<head>
<style>
.main
{
width: 634px;
height: 634px;
}
.img1
{
width: 315px;
height: 315px;
}
</style>
</head>
<body>
<img src="photo/01.jpg" class="main"><br>
<img src="photo/05.jpg" class="img1">
<img src="photo/01.jpg" class="img1">
<img src="photo/01.jpg" class="img1">
</body>
</html>
I want to create instaframe effect on html page. But I cant add images to the right side
You can use floating to achieve your desired effect:
.main {
width:80%; /* width can be anything */
overflow:auto; /* clears floating */
}
.main img {
width:33.33%; /* images are responsive, usually 3 images per row (33.33) */
height: auto; /* resize height based on width to keep image proportion */
float:left; /* float images to the left */
border:2px solid white; /* optional border */
box-sizing:border-box; /* makes sure border does not break total width */
}
.main img.big {
width:66.66%; /* big image takes 2/3 of grid size, so 66.66 of 100 */
}
<div class="main">
<img src="https://placehold.it/100x100" class="big">
<img src="https://placehold.it/100x100">
<img src="https://placehold.it/100x100">
<img src="https://placehold.it/100x100">
<img src="https://placehold.it/100x100">
<img src="https://placehold.it/100x100">
</div>
It is best to wrap the floated elements inside a common parent so that they do not affect the rest of page elements. In this case, the parent is <div class="main">.
jsFiddle
You can use CSS3 flexbox to achieve this;
See code below; you probably also want to use % or ems instead of fixed height/width;
using float as per answer above is more beautiful of course, flexbox is just one more way to achieve same results
Demo: jsFiddle
.main {
width: 300px;
height: 300px;
}
.img {
width: 150px;
height: 150px;
}
.rowContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.columnContainer {
display: flex;
flex-direction: column;
}
.mainContainer {
width: 450px
}
<div class="mainContainer">
<div class="columnContainer">
<div class="rowContainer">
<img class="main">
<div class="columnContainer">
<img class="img">
<img class="img">
</div>
</div>
<div class="rowContainer">
<img class="img">
<img class="img">
<img class="img">
<img class="img">
<img class="img">
<img class="img">
</div>
</div>
</div>