I'm trying to make a carousel slide, but when I'm using object-fit:cover and adding the second image the first and the second image width are changing from 100% to 50%
on 1 input it works fine
See photo here
on second input it's changing its width
See photo2 here
I think the object-fit:cover property can be set with the width property.
image {
width: 100%;
object-fit: cover;
}
Then the image places appropriately so that it's width is 100%.
If you really want img to be 100% in flex layout you can use one of these options:
img {
width: 100%;
flex-shrink: 0;
}
img {
min-width: 100%;
}
If smth else - update/improve your question
Related
I'm trying to prevent the html page from moving, resizing while width page is under 1350 px.
Btw on my css code, for the width, height, transformation: translate, i'm using the value vmax , and not px or %. So the min-width maybe doesn't work with it, all of my elements keep resizing because they are using vmax, so they just adapt there size with the window size too.. :(
I tried this but this doesn't work too (I was trying to stop resizing the three white rectangle, tabcmp0, 1 and 2)
#media only screen and (max-width: 1350px) {
#tabcmp0 {
width: 370px;
}
#tabcmp1 {
width: 370px;
}
#tabcmp2 {
width: 370px;
}
body {
max-width: 1350px;
}
}
Code + preview
See this page for exemple , when she is less than some px, the page stop from resizing and a scroll bar appear, i want the same result but i don't know how to do it ...
i think there is no choice to return px model if you want to create a static content there.
#media only screen and (max-width: 1350px) {
#tabcmp0 {
width: 370px;
height:580px;
left:210px;
}
#tabcmp1 {
width: 370px;
height:580px;
left:590px;
}
#tabcmp2 {
width: 370px;
height:580px;
left:980px;
}
.select_dev {
width:202.5px;
}
body {
max-width: 1350px;
}
}
i think you should give all exact px values instead of dynamic vmax values like that for each element like headers, left menu etc...
so i have this code
<div style="text-align:center; max-width:500px; width:100%; margin:auto"> <script type="text/javascript" src="transition_example.js"></script></div>
this is the transition_example.js:
var show1=new slideshow({
wrapperid: "myslide",
wrapperclass: "sliceClass",
imagearray: [
["1.jpg"],
["2.jpg"]
],
pause: 9000, //pause between content change (millisec)
transduration: 1000 //duration of transition (affects only IE users)
})
i want to set the images to display at 100% width so when the screen resizes the js script resizes too.
Can't find a way to achieve it, i could really use some help.
Thanks in advance!
To make an image responsive to it's container, assuming your container doesn't have a fixed width, just add width: 100% or max-width: 100% to the img.
width: 100% will make the image as wide as the container, and it will scale with it.
.sliceClass img {
width: 100%;
}
<div class="sliceClass">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
max-width: 100% will make the image responsive with the container, but the image width will not expand beyond it's actual width.
.sliceClass img {
max-width: 100%;
}
<div class="sliceClass">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
You can add this css to apply a 100% to the sliceClass generated img
.sliceClass {
width: 100%;
img {
width: 100%;
}
}
I need to maintain the width of an element as a percentage of its height. So as the height changes, the width is updated.
The opposite is achievable by using a % value for padding-top, but padding-left as a percentage will be a percentage of the width of an object, not its height.
So with markup like this:
<div class="box">
<div class="inner"></div>
</div>
I'd like to use something like this:
.box {
position: absolute;
margin-top: 50%;
bottom: 0;
}
.inner {
padding-left: 200%;
}
To ensure the box's aspect ratio is maintained according to it's height. The height is fluid because of it's % margin - as the window's height changes, the box's height will too.
I know how to achieve this with JavaScript, just wondering if there's a clean CSS-only solution?
You can use an image that has the desired proportions as to help with proportional sizing (images can be scaled proportionally by setting one dimension to some value and other to auto). The image does not have to be visible, but it must occupy space.
.box {
position: absolute;
bottom: 0;
left: 0;
height: 50%;
}
.size-helper {
display: block;
width: auto;
height: 100%;
}
.inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255, 255, 153, .8);
}
<div class="box">
<img class="size-helper" src="//dummyimage.com/200x100/999/000" width="200" height="100">
<div class="inner">
1. box has fluid height<br>
2. img has 2:1 aspect ratio, 100% height, auto width, static position<br>
2.1 it thus maintains width = 200% of height<br>
2.2 it defines the dimensions of the box<br>
3. inner expands as much as box
</div>
</div>
In the above example, box, inner and helper are all same size.
You can use vh units for both height and width of your element so they both change according to the viewport height.
vh
1/100th of the height of the viewport. (MDN)
DEMO
.box {
position: absolute;
height:50vh;
width:100vh;
bottom: 0;
background:teal;
}
<div class="box"></div>
There is another, more efficient way to achieve constant aspect ratio according to height.
You can place an empty svg so you dont have to load an external image.
HTML code:
<svg xmlns="http://www.w3.org/2000/svg"
height="100"
width="200"
class='placeholder-svg'
/>
CSS code:
.placeholder-svg {
width: auto;
height: 100%;
}
Change width/height to achieve desired aspect ratio.
Keep in mind, the svg might overflow.
http://www.w3.org/2000/svg is just a namespace. It doesn't load anything.
If you change placeholder-svg class to:
.placeholder-svg {
width: 100%;
height: auto;
}
then height is adjusted according to width.
Demo 1 Width is adjusted according to height and 2:1 aspect ratio.
Demo 2 same as above, but you can resize easily (uses React)
The CSS trick you wrote, works pretty well to keep ratio width / height on an element.
It is based on the padding property that, when its value is in percent, is proportional to parent width, even for padding-top and padding-bottom.
There is no CSS property that could set an horizontal sizing proportionally to the parent height.
So I think there is no clean CSS solution.
As of 2021 there is a property called aspect-ratio.
Most browsers support it
div {
border: 1px solid;
margin: 8px;
}
.box {
width: 100px;
min-height: 100px;
resize: horizontal;
overflow: auto;
}
.inner1 {
aspect-ratio: 1/1;
}
.inner2 {
aspect-ratio: 3/1;
}
<div class="box">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
Run this snippet and resize the outer div manually to see the inner divs behavior
I can't find a pure CSS solution. Here's a solution using CSS Element Queries JavaScript library.
var aspectRatio = 16/9;
var element = document.querySelector('.center');
function update() {
element.style.width = (element.clientHeight * aspectRatio) + 'px';
}
new ResizeSensor(element, update);
update();
CodePen demo!
I have a <div> of fixed size say height:100px and width:100px.
I have to display images of unknown size inside this <div> such that following cases arise:
image width > div width
image width < div width
image width = div width
image height > div height
image height < div height
image height = div height
no matter what, what is the best cross browser strategy, with support for legacy browsers, to display them with following criteria:
no white space around image
nicely centered (horizontally and vertically) if overflow
To eliminate white space, set min-height and min-width to 100% for the images. To clip the overflow, set overflow: hidden on the div. To center overflowing images, use absolute positioning and some JavaScript to set top and left values based on the size of the image.
Edit: If the image is larger than the container in both dimensions, use some JavaScript to remove the minHeight and minWidth and then set the height to 100%. If that leaves whitespace on the width, set height to "" and set width to 100%:
.centeredImageContainer {
height: 100px;
width: 100px;
overflow: hidden;
position: relative;
}
.centeredImage {
min-width: 100%;
min-height: 100%;
position: absolute;
}
function centerImage(img) {
var container = img.parentNode;
if (img.offsetHeight > container.clientHeight &&
img.offsetWidth > container.clientWidth) {
img.style.minHeight = "0";
img.style.minWidth = "0";
img.style.height = "100%";
if (img.offsetWidth < container.clientWidth) {
img.style.height = "";
img.style.width = "100%";
}
}
img.style.top = ((container.offsetHeight - img.offsetHeight) / 2) + "px";
img.style.left = ((container.offsetWidth - img.offsetWidth) / 2) + "px";
}
jsfiddle.net/QRU4w/2
edit:
fiddle
html:
<div id="myPic"></div>
css, if you want a big pic to shrink to fit while still filling the whole div, and want a small pic to expand to fill the whole div:
#myPic{
width: 100px;
height: 100px;
background-image: url(/abs/path/img.jpg);
background-size: cover;
}
css, if you want a big pic to only display a window of the middle without resizing:
#myPic{
width: 100px;
height: 100px;
background-image: url(/abs/path/img.jpg);
background-position: center center;
}
I don't know of a way to both expand small images to fit, while not shrinking big images.
If you mean that you need to have no whitespace including above a landscape-oriented image, for example (i.e. the photo needs to fill the square, regardless of whether it is originally a square), then you may want to look into setting the image as the div's background and using background-size: cover. See this link for browser support.
The best way to do this is by using object-fit property.
.image-container {
width: 400px;
height: 300px;
}
.centered-image {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="image-container">
<img src="https://24seven.co.ke/uploads/sliders/1550944223ecommmerce.jpg" alt="24seven Developers slider" class="centered-image">
</div>
For more illustrations and geeks see this.
Currently I have four images side by side. When the window is resized or viewed on a smaller device it does a line jump (three images and the fourth one beneath it). However what I want is for all four images to just shrink relative to the window size. To make it clear, I've included some images and my code. Here's the jsfiddle as well: http://jsfiddle.net/hxeJb/
^ That is what I currently have.
^ That is what I want to achieve.
HTML:
<div id="headerline">
<img src="http://s21.postimg.org/l6t6akypj/line.jpg"/>
</div>
<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png">
</div>
CSS:
#headerline {
width: 100%;
overflow: hidden;
margin: -10px auto 20px auto;
}
#menu {
max-width: 700px;
text-align: center;
margin: auto;
}
#menu img {
width: 150px;
}
http://jsfiddle.net/hxeJb/2/
#menu img {
width: 20%;
}
See if this help you, just don't provide a fixed width, let image width relative to its parent width
Observing your CSS part in jsFiddle, I think assigning width in percentage rather than fixed pixels will resolve your problem.
You can try this instead of current CSS.
#menu img {
width: 31.33%;
}
Hope this might help you.
The other answers are probably all correct but you may want to add a max-width: 150px; so that hte image does not expand too big and lose quality.
#menu img {
width: 30%;
max-width: 150px;
}
Fiddle: http://jsfiddle.net/hxeJb/4/
Try with the width in percentage to set the image size as per the browser width. It's always preferable to set the width in percentage(instead of pixel) while re-sizing the element based on window re-sizing.
#menu img {
width: 25%; //give the width as per the requirement
}
Hope this will solve your problem :)