I have to rotate an image inside a div. The div must be 100% of width and the image inside is 100% of width so I can not define a fixed height for the div.
<div class="tab-pane" id="floorplan">
<img alt="" src="http://dexpierta.com/wp-content/uploads/2014/05/memes-4-meme_00288337.png" />
</div>
I have tried two solutions:
http://jsfiddle.net/MTyFP/7/
http://www.benknowscode.com/2014/01/css-rotated-text-parent-dimensions-and-spacing-issues.html
But none of them works as needed. Does anyone have experience with rotating images? You can see a fiddle at http://jsfiddle.net/wcqepwar/
Related
I have a that is changing in width (col-x) and in height (h-100) depending on the browser window. Inside that div is a very large image being displayed. The problem with .img-fluid is that it is only constraining in width, depending on the container. But I need a solution that also scales height, when the size of the container div shrinks. But I have not found a solution.
I tried different combinations of min-height, max-height, object-fit and so on, but always the image does not shrink in width, when the container gets smaller (or then when the proportions of the div change from portrait to landscape it does not follow.
I tried to build a basic plunker to demonstrate using vh for the height of the wrapper. So the goal would be for both images to always stay inside the column. You can try playing around with the height and width of the browser to see the effect.
<div class="wrapper">
<div class="row h-100">
<div class="col-4">
<img src="https://i.stack.imgur.com/2OrtT.jpg" class="img-fluid" />
</div>
<div class="col-8">
<img src="https://i.stack.imgur.com/2OrtT.jpg" class="img-fluid" />
</div>
</div>
</div>
Styles:
.wrapper {
height: 60vh;
}
https://plnkr.co/edit/LbavqYXNNVlftUOw4Xfr?p=preview
Add css height:100%; for image
I have a set up in wordpress using bootstrap what follows:
<div class="container">
<div class="row">
<div id="NEEDS TO BE FULL WIDTH>
</div>
</div>
</div>
I would like the background of the "NEEDS TO BE FULL WIDTH" div be full browser width but not sure how. If I make it more the 100% width it makes a horizontal scroll. Any ideas?
You can have multiple .container elements inside your html. If you change the .container into a container-fluid the content of the container will take up 100%
If you only want the background to be full width, but you want the content to be constrained by the .container (at most about 1140 pixels wide) then surround the .container with another <div> and put the background-image on that element.
I often find myself using code blocks for inline article images like the following:
...article text.
<div class="article-image right" style="width: 250px;">
<img src="..." width="250" alt="" />
<p class="caption">Potentially long image caption</p>
</div>
More article text...
Or, the more succinct HTML5 version:
...article text.
<figure class="right" style="width: 250px;">
<img src="..." width="250" alt="" />
<figcaption>Potentially long image caption</figcaption>
</figure>
More article text...
Since I use a CMS that processes images on the fly, I've been defining the size of the image (250px in this case) dynamically, and I've also been applying that size restriction to the parent element that contains both the img and its caption. This way, the caption never increases the size of the parent element beyond the defined width of the img tag.
My question is if there is some CSS trick I can apply to one of the elements that will accomplish the same thing without manually defining the width? Some way to prevent the captions from expanding their parent element in width, yet allowing them to influence the height? Of course the parent element's width still needs to adapt to the img's width...
To stop children elements from affecting parent width apply this to the child:
min-width: 100%;
width: 0;
This gets around solutions using absolute positioning.
For vertically lining them up, also use:
vertical-align: top;
JSFiddle: http://jsfiddle.net/ETkkR/87/
CSS code to div or figure element is alone enough.
style="width: 250px;
**max-width:250px;"**
This will set static width to the div or figure tag even when the width of the image is higher
i have a sidebar having many nested divs to place my rounded corrners.but when i tried to set the content's div height equal to 90% its not expanding.what is the issue.my html,body have 100% height.my div nest is some what like this.
<body>
<div class="main"> //it contains header n content div,its height is 90%
<div class="header"></div> //its height is 10% of main div
<div class="content"> //its height is 90% of main div
<div class="vertical_navigation"> //its height is 99% of content div
<div><div><div><div> //thses divs are for rounded corner image concept
<div> </div> //this div contains the data.now its height is 80% but its not expanding?h
//i cant use min-height,its not working too.how to give height referenced to //vertical navi div??
</div></div></div></div>
</div>
</div>
</div>
<footer></footer>
</body>
have you considered applying rounded corners with just css and not worrying about the ieretards not having them?
When having so much nested div, it's good you consider the measurement in width and height of the DIV if the container div is lesser that the ones inside it, it won't stretch,because that way, the browser can't detect how far the div is meant to stretch. to resolve this use make proper use of CSS.
I am trying to build a page with the following in it:
Already have the following:
one div for page to center the whole page with width 809px
inside <div class="page"> is the following:
<div class="header">
<div class="container"> (container for content stuff)
<div class="footer">
What I am struggling with:
<div class="container"> should contain the following:
leftmost <div class="leftShadow"> with 100% height to container, with left shadow image as background for <div class="leftShadow">
second to left <div class="custom_content"> with 100% height to container (will contain content of page
second to right <div class="sidebar_right"> with 100% height to container (will contain extra links)
rightmost <div class="rightShadow"> with 100% height to container, with right shadow image as background for <div class="rightShadow">
So to summarise:
<div class="page">
<div class="header">header image</div>
<div class="container">
<div class="leftShadow"><img src="images/spacer.gif" alt="" /></div>
<div class="custom_content">(this is where the content would be)</div>
<div class="sidebar_right">(some other links)</div>
<div class="rightShadow"><img src="images/spacer.gif" alt="" /></div>
</div>
So what is supposed to happen is, when either custom_content or sidebar_right div's strength in length below the other, the other one would stretch in height to be the same with as the longer div. Obviously, both side div's (leftShadow and rightShadow) should also stretch to 100% of the container's height.
Can someone please guide me in the right direction? Basically, these div's should behave much like a table would when one td's content stretches beyond the height of the other td's.
Don't use divs like tables!
The leftShadow and rightShadow divs are completely unnecessary. Combine your background images into a single image and set it as the background of your container div.
To make sure the background image fills the height of the container, set background-repeat: repeat-y.
Why not use something like "Faux Columns"?
See http://www.alistapart.com/articles/fauxcolumns/
Perhaps you won't need the leftShadow and rightShadow divs: take a look at faux columns.
This is what you are looking for, I hope. :)
I'd do this differently because you're not going to get your divs to behave like tables.
I'm not entirely sure what you're wanting this to look like, but I'm guess you want some sort of shadow image down the left and right side of the container div. How about removing the leftShadow and rightShadow divs, put a repeatable background image on the content div of width 809px (and maybe height 1, depending on what your shadow image looks like). Also perhaps set overflow:hidden on the content div - if I remember rightly thats a kind of hack which will make the containing div stretch in this situation.