I have a div width that resizes according to the browser width, right now it is set to 80%.
What I'm trying to accomplish is depending on the image size, I would like the image to take up the whole div width. If it's a small image, keep image size and center.
In my fiddle, any image width over 800px should start from the right and expand according to the div re-size. It should always touch the right side and expand with the div width.
If the image width is smaller than or equal to 500px, it should stay it's size and resize according to div but stay in middle of div only.
The problem is, I'm not sure how to only affect certain images, I would like a solution that detects the image size because the images might switch.
.parent{
border:1px solid purple;
height:100%;
width:80%;
float:Right;
}
.child{
border:1px solid red;
height:100%;
background:gray;
text-align:center;
}
.child-img{
display:inline-block;
max-width:100%;
margin:0 auto;
}
.image-wrapper{
width:100%;
background:orange;
}
img{
width:auto;
height:100%;
width:100%;
}
<div class="parent">
<div class="child">
<div class="image-wrapper">
<img src="http://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/250px-025Pikachu.png" alt="" class="child-img">
</div>
<div class="image-wrapper">
<img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg" alt="" class="child-img">
</div>
<div class="image-wrapper">
<img src="https://em.wattpad.com/62f9f1c9de49ad97d7834b1e58e16a99eb2dc3c7/687474703a2f2f6170692e6e696e672e636f6d2f66696c65732f7363525a66707a54694d7a4d48484e586b7247575277674b6878726537617531666736413834472d684c484c616c7271302d6f4152524f6f525a6e55387076415a41637a545a6b4c6442476f6144496336507834395030744245426d4a646e382f50696b616368752e66756c6c2e313435323733332e6a7067?s=fit&h=360&w=360&q=80" alt="" class="child-img">
</div>
<div class="image-wrapper">
<img src="http://vignette3.wikia.nocookie.net/scratchpad/images/0/02/Pikachu.gif/revision/latest?cb=20150217015901" alt="" class="child-img">
</div>
</div>
</div>
Try using jQuery to detect the image's size.
$('.child-img').each(function() {
if ($(this).width() > 800) { $(this).addClass('right'); }
else if ($(this).width() < 500) {$(this).addClass('center');}
});
And the required css would be:
.child-img.right {
display: block;
max-width: 100%;
}
.child-image.center {
width: auto;
max-width: 100%;
display: inline-block'
}
.parent { text-align: center; }
I think you should be able to place the image in the background of the div and make its width and height percentage values.
background: url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
Related
I am not good at English, so I ask questions using a translator.
I'm sorry.
I use the ScrollMagic library
Created a Mobile Page.
For ScrollMagic to work
html, body's height should be 100%.
Content Inside has an Iframe.
The Position property of the parent DIV of the Iframe is Fixed.
PC: Put your cursor over the iframe, scroll, scroll, and you won't scroll.
Mobile: Put your cursor on the Iframe and touchMove, you can't scroll.
If I scroll "iFrame,"
I want to scroll ".a, .b" instead.
Below is an example source
HTML
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="b">
BOTTOM
</div>
<div class="item">
<iframe src="https://fr.wikipedia.org/wiki/Main_Page" scrolling="no"/>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
CSS
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.a, .b {
width: 100%;
position:relative;
z-index:2;
}
.a {
background-color: red;
height:120%;
}
.b {
background-color: blue;
height:50%;
bottom:0px;
}
.item {
width:100%;
height:100px;
top:20%;
position:fixed;
z-index:3;
}
.item iframe {
width:100%;
height: 100px;
}
jsfiddle.net
Setting the IFRAM's property to "pointer-events: none" will work.
But click should be possible in the IFRAM,
So I'm looking for another way.
If you have any good information, please let me know.
I want to have aspect ratio controlled by parent height.
Every example I search in stackoverflow and codepen are examples of aspect-ratio by width size.
In my example I have two div. there height is controlled by wrap div. so in the first div there is a div inside that should display in 16:9 aspect-ratio.
This is mean if the height is 200px then the width should be 355px (200*(16/9)).
Please keep in mind that height can change because I use vh.
How to do that with css?
Here is my example code in codepen
.wrap { display:grid;grid-template-columns:1fr;grid-template-rows:30vh 70vh; }
.item { border:1px solid red; }
.aspect-ratio { background:blue; height: 100%; }
<div class="wrap">
<div class="item">
<div class="aspect-ratio">aspect ratio should be 16:9</div>
</div>
<div class="item"></div>
</div>
you can use css calc();
.wrap { display:grid;grid-template-columns:1fr;grid-template-rows:30vh 70vh; }
.item { border:1px solid red; }
.aspect-ratio { background:blue; height: 100%; width: calc(30vh * 16 / 9); }
<div class="wrap">
<div class="item">
<div class="aspect-ratio">aspect ratio should be 16:9</div>
</div>
<div class="item"></div>
</div>
This question already has answers here:
How do I auto-resize an image to fit a 'div' container?
(33 answers)
Closed 4 years ago.
I have a problem with trying to fit an image into my div. My image is bigger than my div, so when I do the traditional
style="width:100%;"
it will resize the div, taking up more space than it should.
I've tried using
style="max-width:100%;" background-size: contain; background-size: cover;
and pretty much all the methods of resizing the image to fit an entire div.
I'm using CSS grid, and so the size of the area is how i'd like to keep the entire image to fit, but when using things like max-width it just changes the size of the area, making it bigger than what it should be
I essentially want to do something like
This example
where the image would take up the entire div and not overflow
I quickly created the following css grid which looks like your desired result to demonstrate. I have also added a couple cool tricks you can do with CSS grid.
body, html{
margin: 0;
padding: 0;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.container{
margin: 0 auto;
width:100%;
height: 100vh;
display:grid;
grid-template-columns: 5% repeat(3, 1fr) 5%;
grid-template-rows: 5% repeat(2,1fr) 5%;
grid-gap: 1%;
}
.imageOne{
grid-row: 2/3;
grid-column: 2 / -2;
background-color:rgb(247,247,247);
background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');
background-repeat:no-repeat;
background-size: 100% 100%;
background-position:center;
color:rgb(255,255,255);
}
.imageTwo{
grid-row: 3/4;
grid-column:2 / 3;
background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');
background-repeat:no-repeat;
background-size: 100% 100%;
background-position:center;
color:rgb(255,255,255);
}
.imageThree{
grid-row: 3/4;
grid-column:3 / 4;
background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');
background-repeat:no-repeat;
background-size: 100% 100%;
background-position:center;
color:rgb(255,255,255);
}
.imageFour{
grid-row: 3/4;
grid-column:4 / 5;
background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');
background-repeat:no-repeat;
background-size: 100% 100%;
background-position:center;
color:rgb(255,255,255);
}
<div class="container">
<div class="imageOne">
image one
</div>
<div class="imageTwo">
image two
</div>
<div class="imageThree">
image three
</div>
<div class="imageFour">
image four
</div>
</div>
Enjoy and hope it helps. Also Codepen link here
I guess this may be the solution you need.
Sample
<div>
<div class="outer">
<img class="img_size" src="https://www.w3schools.com/html/pic_trulli.jpg" alt="not found">
</div>
<div class="outer">
<img class="img_size" src="https://www.w3schools.com/html/pic_trulli.jpg" alt="not found">
</div>
<div class="outer">
<img class="img_size" src="https://www.w3schools.com/html/pic_trulli.jpg" alt="not found">
</div>
</div>
CSS:
.outer {
width: 180px;
height: 180px;
margin: 10px;
float: left;
}
.img_size {
width: 100%;
height: 100%
}
All the depends on the style of outer div. Better enclose your image tag inside a div and provide appropriate width & height to that.
I understood your scenario you can simply use object-fit css property to achieve the result.
Example:
<html>
<head>
<title>
Image Example
</title>
</head>
<style>
.outer-div{
height:300px;
width:300px;
.outer-div img{
height:300px;
width:100%;
/* This will set the image size as cover */
object-fit: cover;
/* Give this a try too..use which ever fits your scenario.
object-fit:contain;
*/
</style>
<body>
<div class="outer-div">
<img src="path/to/image">
</div>
<body>
<html>
I have an img inside a div container which has some background color. I want the image to overlay on top of the div container and cross it's height beyond the div's height, without any scroll bars.
A fiddle related to this http://jsfiddle.net/mLtfcm6n/2/
Fiddle code:
<div class="container">
<img class="image" src="https://cdn1.iconfinder.com/data/icons/prettyoffice9/256/triangle.png"></img>
</div>
.container {
background-color:red;
height:100px;
position:relative;
overflow:hidden;
}
.image {
position:absolute;
left:40px;
height:256px;
}
I can't set overflow-y to hidden and overflow-x has to be hidden
The end result should be like this fiddle: http://jsfiddle.net/mLtfcm6n/3/
CSS for it is(only change is removal of overflow property):
.container {
background-color:red;
height:100px;
position:relative;
}
.image {
position:absolute;
left:40px;
height:256px;
}
Help!
.container {
background-color:red;
height:100px;
position:relative;
overflow:hidden;
}
.image {
position:fixed;
left:40px;
height:256px;
}
<div class="container">
<img class="image" src="https://cdn1.iconfinder.com/data/icons/prettyoffice9/256/triangle.png"></img>
</div>
I have two divs. One div contains an image, and the other will contain a text caption that will be layed over the image.
How can I make the caption div width be equal to the image div in a fluid design?
The page is designed using a fluid layout and thus the image will can size with the browser size is changed.
<div id="captions">Captions</div>
<div id="image"></div>
Is there a way to do this in CSS?
You could put both elements into your div and then set the width
<div id="yourdiv">
<img id="yourimg" src="" />
<p class="yourtext">Here some Text</p>
</div>
and then set the width of .yourtext
.yourtext {
width: 100%;
}
FIDDLE
We may inverse the situation as follows:
HTML
<div id="captions">
Captions..
<div id="image"><img src="http://lorempixel.com/450/200/" /></div>
</div>
CSS
#captions{
background: #000;
color:#fff;
/* width:100%;*/
display:inline-block;
padding-bottom: 0px;
margin-bottom: 0px;
}
#image{
width: 100%;
padding-bottom: 0px;
margin-bottom: 0px;
}
#image img{
vertical-align: bottom;
}
This is a DEMO