HTML:
<div id="tmenu" style="direction:rtl;">
<img src="assets/imgs/menu/all.jpg"/>
<img src="assets/imgs/menu/sweets.jpg"/>
<img src="assets/imgs/menu/main meals.jpg"/>
<img src="assets/imgs/menu/ma5bozat.jpg"/>
<img src="assets/imgs/menu/moqblat.jpg"/>
<img src="assets/imgs/menu/mofrznat.jpg"/>
<img src="assets/imgs/menu/carnavals.jpg"/>
<img src="assets/imgs/menu/other.jpg"/>
</div>
Check this image
https://imgur.com/a/hsKax
The images in the top header are the problem. There's about 8 pics.
It shows which fit the width of the screen and hide the rest.
CSS:
#tmenu
{
width: max-content;
overflow-x: scroll!important;
img
{
display: inline-block;
width: 100px!important;
height: 100px!important;
}
}
How to make it scrollable?
#tmenu
{
width: max-content;
overflow-x: scroll!important;
height:100px;
overflow-y:hidden;
white-space:nowrap;
float:left;
width:400px;
font-size:0
}
img
{
display: inline-block;
width: 100px!important;
height: 100px!important;
vertical-align:middle;
}
<div id="tmenu" style="direction:rtl;">
<img src="assets/imgs/menu/all.jpg"/>
<img src="assets/imgs/menu/sweets.jpg"/>
<img src="assets/imgs/menu/main meals.jpg"/>
<img src="assets/imgs/menu/ma5bozat.jpg"/>
<img src="assets/imgs/menu/moqblat.jpg"/>
<img src="assets/imgs/menu/mofrznat.jpg"/>
<img src="assets/imgs/menu/carnavals.jpg"/>
<img src="assets/imgs/menu/other.jpg"/>
</div>
What about this?
Related
I need to make six images the same size, but everything I've done isn't working and so I'm here searching for help.
Here is my HTML:
<div>
<h1>Finest Images</h1>
<img src="img/arch.jpg" alt="Arch">
<img src="img/lake.jpg" alt="Lake">
<img src="img/landscape.jpg" alt="Landscape">
<img src="img/perfect.jpg" alt="Perfect">
<img src="img/treesnwater.jpg" alt="TreesnWater">
<img src="img/walk.jpg" alt="Walk">
</div>
Suppose your html looks like this
<div>
<img class="imgClass1">
<img class="imgClass2">
<img class="imgClass3">
<img class="imgClass4">
<img class="imgClass5">
<img class="imgClass6">
</div>
then you can add style in css as
.imgClass1, .imgClass2, .imgClass3, .imgClass4, .imgClass5, .imgClass6 {
width: 100px;
height: 100px;
}
You have multiple ways to do these. One way would be use css. For example:
<div>
<img src="folder/pic.jpg">
<img src="folder/subfolder/pic.jpg">
</div>
And the css will look like:
div img {
height: 100px;
width: 100px;
}
You can add inline styles to the elements, too.
<img style="height: 100px; width: 100px;" src="folder/pic.jpg">
<img style="height: 100px; width: 100px;" src="folder/subfolder/pic.jpg">
You can just add styles inline in HTML:
<div>
<h1>Finest Images</h1>
<img style="width:100px; height:100px;" src="img/arch.jpg" alt="Arch">
<img style="width:100px; height:100px;" src="img/lake.jpg" alt="Lake">
<img style="width:100px; height:100px;" src="img/landscape.jpg" alt="Landscape">
<img style="width:100px; height:100px;" src="img/perfect.jpg" alt="Perfect">
<img style="width:100px; height:100px;" src="img/treesnwater.jpg" alt="TreesnWater">
<img style="width:100px; height:100px;" src="img/walk.jpg" alt="Walk">
</div>
img {
max-width: 100%;
max-height: auto;
position: relative;
vertical-align: middle;
left: 50%;
transform: translate(-50%);
height: 150px;
width: 150px;
object-fit:cover;
}
div {
width: 20%;
height: auto;
min-height: 100%;
overflow: hidden;
position: relative;
display: inline-block;
}
<div>
<img src=""> Text(1)
</div>
<div>
<img src=""> Text(2)
</div>
<div>
<img src=""> Text(3)
</div>
<div>
<img src=""> Text(4)
</div>
<div>
<img src=""> Text(5)
</div>
<div>
<div>
<img src=""> Text(6)
</div>
<div>
Also you can use from flex:
<div class="container">
<div>
<img src="folder/img1">
</div>
<div>
<img src="folder/img2">
</div>
<div>
<img src="folder/img3">
</div>
<div>
<img src="folder/img4">
</div>
<div>
<img src="folder/img5">
</div>
<div>
<img src="folder/img6">
</div>
</div>
css:
If you want to images sorted in the page width:
.container{
display: flex;
justify-content: space-between;//or justify-content: center;
}
.container div{
width: 150px;
height: 150px;
}
img{
width: 100%;
height: 100%;
}
Otherwise, if you want to images placed below each other:
.container{
display: flex;
flex-direction: column;
}
.
.
This solution might work for the issue that you're facing.
Add a class to the div element, then add CSS using parent class.
.sequence-img img {
height: 200px;
width: 200px;
object-fit: cover;
}
<div class="sequence-img">
<h1>Finest Images</h1>
<img src="http://via.placeholder.com/640x360" alt="Arch">
<img src="https://dummyimage.com/lrgrec" alt="Lake">
<img src="https://dummyimage.com/16:9x1080/" alt="Landscape">
<img src="https://user-images.githubusercontent.com/13071055/45196982-c7bd6100-b213-11e8-90c9-8c9cdee8717f.png" alt="Perfect">
<img src="https://dummyimage.com/lrgrec" alt="TreesnWater">
<img src="https://dummyimage.com/16:9x1080/" alt="Walk">
</div>
You could add this css code to your HTML
img {
float: left;
width: 100px;
height: 100px;
object-fit: cover;
}
<div>
<h1>Finest Images</h1>
<img src="http://i.imgur.com/tI5jq2c.jpg">
<img src="http://i.imgur.com/37w80TG.jpg">
<img src="http://i.imgur.com/B1MCOtx.jpg">
</div>
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.
I have a div for slick slider, product card to be exact.
It should be displayed inline, and picture should be the whole size of the card-info.
.product-card__item {
display: flex;
width: 100%;
min-height: 450px;
}
.product-card__item-preview {
flex-basis: 48.5%;
height: 100% width:100%
}
.product-card__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-card__item-info {
width: 51.5%;
background-color: #fff;
padding: 1.2em;
}
}
```
<article class="product-card">
<div class="product-card__preview">
<img class="product-card__img" src="https://via.placeholder.com/150" alt="">
</div>
<div class="product-card__info">
<div class="product-card__info-top">
<a class="product-card__title" href="#">
One Page Resume Template
</a>
<div class="product-card__author">
<img class="product-card__avatar" src="https://via.placeholder.com/50" alt="user avatar">
<a class="product-card__top-name" href="#">
AazzTech
</a>
</div>
</div>
</div>
</article>
but with even slightly resizing the window for adaptation, picture starts doing this:
I know it could be fixed easily if I make amg as a bg for preview div, but how is it possible with img tag?
I dont have your code, but you can try this:
.container{
display:flex;
height:500px;
}
.container > div{
flex: 1 1 0;
overflow:hidden;
}
.second img{
height:100%;
}
.first{
background-color:red;
<div class="container">
<div class="first"></div>
<div class="second">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/42/Shaqi_jrvej.jpg" alt="">
</div>
</div>
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>
I want to arrange the two images in my HTML page side by side.
I want the images to stay side by side even if the page size changes.
I also want the second image to span the entire header of the page ie. all the space left after the first image. The images here are of different size.
For now, I have arranged two images side by side, but when I change the size of the page, the image wraps and comes in the next line after the first image.
Here is my code sample and the CSS:
.header {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 120px;
}
<img class="header" src="http://www.placehold.it/160X120" style="float: left;" alt="CCM Logo">
<img class="header" src="http://www.placehold.it/543X120/0000FF" alt="CCM Banner">
Here is a Fiddle.
Use white-space: nowrap to prevent wrapping.
.header {
margin: 0 auto; max-width: 800px; /*centering header*/
height: 120px; position: relative; /*scale header images to 120px*/
white-space: nowrap; /*keep one-line*/
overflow: hidden; /*hide excess images parts on small screens*/
}
.header>img { height: 100%;}
<body>
<div class="header">
<img src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" alt="CCM Logo">
<img src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner">
</div>
</body>
.header {
display: inline-block;
margin-left: auto;
margin-right: auto;
max-width: 50%;
height:120px;
}
HTML:
<body>
<img class="header" src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" style="float: left;" alt="CCM Logo">
<img class="header" src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner">
</body>
Give style
.header {
display: block;
float:left;
height: 120px;
}
to both images
Apply below style:
.header {
display: inline-block;
height: 120px;
width: 50%;
}
Try with max-width Demo
.header {
max-width:50%;
}
Try this -
<div class="imgclass">
<div class="img1">
your img here
</div>
</div>
<div class="imgclass">
<div class="img2">
your img here
</div>
</div>
On your css file or between <style>here</style> this -
.imgclass {
display: table-cell;
}