div {
display:block;
width:320px;
background:url('images/cnon.jpg');
background:contain;
}
Is there any way to auto-adjust <div> height depending on background height?
I can't understand what do you actually want, but if you want to make div fully aligned to background:
div {
display:block;
width: auto;
height: auto;
background:url('images/cnon.jpg');
background:contain;
margin: -10px; //Optional
}
Sorry if i didn't understood your question well.
if you could use jQuery you can handle it simply by checking on the img height then apply this height to the div itself
You can adjust the height of div, adjusting the padding top of the div, just need to set the css automatically.
.div_image{
background:url('images/cnon.jpg');
height: 0;
width: 100%;
background-size: contain;
padding-top: 20%;
}
The padding-top is calculated by a formule.
(image-height[px] / image-width[px]) * container-width[%]
Example: (274px / 1370px) * 100% = 20%
With this result the padding-top need to be 20%.
Related
Using CSS I would like to restrict 1 dimension to never exceed a factor of the other.
For example this pseudocode:
max-height: (width * 0.75)px;
Would ensure that the height of the element never exceeds 75% of it's width, but it may be smaller.
Is something like this possible, or am I out of luck?
Edit: Please note that I'm not looking to make the height exactly 75% of the width, but rather I am looking to make sure it doesn't exceed 75%
If the element takes the entire viewport width. You can do something like:
.class {
max-height: 75vw;
}
You can't set the ratio, but there's always padding-bottom!
div {
width: 100%;
padding-bottom: 75%;
}
This code will set div to 4:3 ratio
For 16:9 ratio use padding-bottom: 56.25%
An edit after re-read
What if I suggest using a div inside a div?
<div class="a">
<div class="b">
</div>
</div>
<style>
.a{
width:100%;
padding-bottom: 75%;
background-color: red;
position: relative;
}
.b{
width: 100%;
max-height: 100%;
background-color: white;
position: absolute;
overflow: hidden;
}
</style>
Put the content inside div.b and it will never exceed the 75%
CSS does not allow setting a property based on other's value, you would need to use another approach, such as javascript, for this.
Here's a jQuery example:
var $elem = $('#elem');
$elem.css('max-height', $elem.width() * 0.75 );
Check out this question: Height equal to dynamic width (CSS fluid layout)
Specifically #Kristijan's answer. You will need to adjust the bottom padding.
.some_element {
position: relative;
width: 20%;
height: 0;
padding-bottom: 20%;
}
OK, if I have a div:
<div id="imgholder">
<img id="myimg" src = "foo.png">
</div>
I need the image to be no larger than 700px by 700px.
So I did this:
#myimg{
max-height: 700px;
max-width: 700px;
}
But now, I need the div to wrap tightly around the image. How can I do this? It seems like I would want a max height and width on there. The div defaults to being 100% of the body's height and width. So if I put a max height and width on it, it ALWAYS comes out to that height and width, even if the picture inside is smaller than that. How can I fix this?
EDIT: Realized I left out why it is defaulting to the height and width of the body:
#imgholder{
overflow: hidden;
z-index:1000;
background-color: #F0D2DB;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left:0;
right:0;
padding: 10px;
border-radius: 10px;
float: left;
}
I'm having it pop over the pages content, so I'm using the top,bottom,left, and right attributes to help center it.
I'm working on a responsive wordpress theme but I have little problem. My page includes several boxes that are displayed side by side. Each box has a responsive height and width and contains an image and text(text is overlaid on the image).
Is there a way to set all boxes to the same height considering the correct aspect ratio(image)? Also if some boxes don't contain an image?
Live-Preview: http://apu.sh/3ne
JsFiddle http://jsfiddle.net/tjwHk/
My suggestion for your case is to fix all the boxes width & height to a value of your preference.
then, give a max-width & max-height of 100% to the image. causing it to never overflow the parent div [box] without losing the aspect ratio of the image. (if you'll try to do this with width & height you will lose the ratio)
Edit: padding:none; is not valid. use padding:0; instead
So, to summarize, change this in your CSS:
#custom-list .custom-list-element
{
width: 50%;
height: 200px; /* fix any height you want*/
float: left;
background-color: #333333;
text-align: center; /*so the image will always be centered in the div*/
position: relative;
}
#custom-list .custom-list-element img
{
max-width: 100%; /* the width never overflow the div*/
max-height: 100%; /* the height never overflow the div*/
}
#custom-list .custom-list-element article p
{
padding: 0; /* valid value */
}
#custom-list .custom-list-element article h1
{
color: #fff;
padding: 0; /* valid value */
font-size: 1.5em;
}
and finally, because I like Fiddles so much.. http://jsfiddle.net/avrahamcool/tjwHk/1/
.imageButton {
width: 14px;
height: 50px;
}
.divClass{
width:100px;
height: 30px;
}
<div class="divClass"><img class="imageButton" /></div>
here the height of the .divClass is dynamic.Now my problem is while displaying in need to crop this image according to the div's height. for example:- if div's height is 30 then img needs to be cropped top-((img's height-div's height)/2) and bottom-((img's height-div's height)/2)
How to achieve this?
If it's possible in your case setting image as div's background instead of placing it in HTML would have the desired effect
.divClass {
background: transparent url('imageButton.png') 50% 50% no-repeat;
}
apply 100% height and width to image
.imageButton {
width: 100%;
height: 100%;
}
you can adjust height and width according to your need. you can specify it 50% if you want it to be half of parents height or width
hope it'll help
Thank you
I have a div with width:100px and height:100px (say)
Inside that, there is just an image, for which height is always fixed to 100px.
I want to make the image horizontally center.
Here there are 3 cases:
image's width is equal to div's width, no issues
image's width is less than div's width, I can use margin: auto here
image's width is more than div's width
I want the center part of the image to be visible inside the div.
means, if image's width is 120px and as div's width is 100px and overflow:hidden
I want image's 10th px to 110th px to be visible (so, the left: 10px and right: 10px of image are hidden under the div )
Is this possible through some CSS property?
(I dont know the width of image which is loading! so I want it to be dynamic.
Also want to avoid javascript side calculations to find the extra amount of width and giving margin-left: -ve value bla bla.. )
Also, I can't give the image as background-image for the div!
See: http://jsfiddle.net/thirtydot/x62nV/ (and without overflow: hidden to easily see the centering)
This will work in all browsers, with the possible exception of IE6.
For .imageContainer > span, the margin-left is derived from the width, and the width is an arbitrary number which controls the maximal image width that will be supported. You could set width: 10000px; margin-left: -4950px; to support really wide images, if required.
HTML:
<div class="imageContainer">
<span><img src="http://dummyimage.com/100x100/f0f/fff" /></span>
</div>
CSS:
.imageContainer {
border: 1px solid #444;
overflow: hidden;
width: 100px;
height: 100px;
margin: 15px;
text-align: center;
}
.imageContainer > span {
display: block;
width: 1000px;
margin-left: -450px; /* -(width-container width)/2 */
}
.imageContainer > span > img {
display: inline-block;
}