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>
Related
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 simulate a shelf of books so that they look like this:
photoshop_mock_up
I can get the books to align just fine, but can't figure out how to make them retain their odd heights/widths, and not all just resize to the container:
HTML:
<div class="images-outer">
<div class="image-inner">
<img src="img/_0002_aristotle__poetics_and_rhetoric.png">
</div>
<div class="image-inner">
<img src="img/_0005_david_mamet__make_believe_town.png">
</div>
<div class="image-inner">
<img src="img/_0003_david_mamet__bambi_vs_godzilla.png">
</div>
<div class="image-inner">
<img src="img/_0006_annie_dillard__pilgrim_at_tinker_creek.png ">
</div>
</div>
CSS:
.images-outer {
height: 50%;
max-height: 50%;
display: flex;
vertical-align: bottom;
}
.image-inner img {
max-height: 100%;
}
img {
max-height: 100%;
}
This makes them look like this: web_page
Ideas?
In display: flex, you should use align-items to set vertical align and justify-content for horizontal align.
.images-outer {
height: 300px;
max-height: 50%;
display: flex;
align-items:flex-end;
justify-content:center;
background: black
}
.image-inner {
max-width:30px;
padding: 0px 5px;
}
.image-inner {
object-fit: contain;
object-position: bottom;
width: 100%;
}
<div class="images-outer">
<div class="image-inner">
<img src="https://picsum.photos/30/200" />
</div>
<div class="image-inner">
<img src="https://picsum.photos/30/240" />
</div>
<div class="image-inner">
<img src="https://picsum.photos/30/180" />
</div>
<div class="image-inner">
<img src="https://picsum.photos/30/200" />
</div>
</div>
</div>
.image-inner img{
width:100%;
height:auto;}
This should help in sizing the images properly
Else, you could dive each image an individual class and give each it's individual height.
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%;
}
I have the following HTML structure currently:
<div id="image" style="margin: 20px;">
<h5>
<span>DriverName1</span>
<span>DriverName2</span>
</h5>
<img src=/>
<img src= />
</div>
I am trying to make the images appear side by side which they are doing, but the headers for drivername1 and drivername2 are appearing right next to each other over the same image. How do I make these spans match up with the top left edge of each image? I tried adding separate headers over each image but that makes the images go vertically one on top of the other then.
you can consider using display:flex for this
check the following snippet
div{
display:flex;
}
.image {
display: flex;
flex-direction: column;
border:1px solid;
margin-left:10px;
}
img {
width: 100px;
height: 100px;
}
<div id="image" style="margin: 20px;">
<section class="image">
<header>DriverName1</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg">
</section>
<section class="image">
<header>DriverName2</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg" width=25px height=25px>
</section>
</div>
Non-flex solution
div * {
display: inline-block;
}
.image {
border: 1px solid;
margin-left: 10px;
}
img {
width: 100px;
height: 100px;
display: table-cell;
}
header {}
<div id="image" style="margin: 20px;">
<section class="image">
<header>DriverName1</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg">
</section>
<section class="image">
<header>DriverName2</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg" width=25px height=25px>
</section>
</div>
Hope this helps