i wanna view an image in the size based on div that contains the image. i use yii framework.
i have a css code like this
#ukuran1{
margin: 10px;
width: 250px;
height: 250px;
background: red;
float: left;
display: block;
}
and a layout code like this
<div id="ukuran1"><?php echo $this->ukuran1 ?></div>
and the view code like this
$this->ukuran1 = CHtml::image(Yii::app()->request->baseUrl.'/images/Desert.jpg');
the image shows, but in the actual size of the image. i want the image to sized as the div.
what shoul i do?
thanks guys..
Try putting this rule in your CSS:
#ukuran1 img {
width:100% !important;
height:100% !important;
}
#ukuran1 {
margin: 10px;
width: 250px;
height: 250px;
background: red;
float: left;
display: block;
line-height: 250px;
text-align: center;
}
#ukuran1 img {
vertical-align: middle;
max-width: 250px;
}
Try This
Related
I'm having problems centering an image between two float-aligned pictures.
I can't add margin-left to the image in the middle. I would like it to stay centered on resizing.
My code:
#skjirt {
display: inline;
margin-left: auto;
margin-right: auto;
float: flex;
height: 400px;
width: 400px;
border: 3px solid #662C49;
margin-top: 20px;
}
#skjirt1 {
display: inline;
float: left;
margin-left: 20px;
height: 400px;
width: 400px;
border: 3px solid #662C49;
margin-top: 20px;
}
#skjirt2 {
display: inline;
float: right;
height: 400px;
width: 400px;
border: 3px solid #662C49;
margin-top: 20px;
margin-right: 20px;
}
#imageWrap {
width: 100%;
height: auto;
margin-top: 100px;
}
If you want to make the image blocks display in the middle then instead of aligning them using float, just center them by applying the text-align:center to the #imageWrap container. Also change your display:inline to display:inline-block so that the img or any other element inside the boxes conform and adjust to the parent width and height.
Below is a sample code using your classes and I modified it with the suggested solution.
P.S. The suggested solution also makes the boxes to be responsive. :)
https://codepen.io/Nasir_T/pen/wqjKoa
I have two elements that I want to place next to each other - one is a logo, the other is an "overflow" menu that will display a dropdown when clicked.
I want to have them scale so that the logo is at most 400px wide, and the menu button is always 1.5em wide and tall. The logo should stay vertically center aligned with the menu button, and the button should always be at the far right of the parent.
Tried using flexbox but I'm no CSS genius, I can't make it work. (btw, will we ever see CSS being more like the Android XML layout system? It'd be a breeze to use a LinearLayout with some gravity and weight to do something like this. With CSS it seems you always have to resort to hacks and hard-to-read solutions at some point)
So this is what it would look like when the logo is at it's maximum 400px width:
And here is what it would look like on a phone, where the logo needs to shrink to make room for the menu button:
Here's a solution using flexbox.
.header {
display: flex;
flex-direction: flex-end;
justify-content: space-between;
}
.logo {
background-image: url(http://placehold.it/400x50);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 50px;
max-width: 400px;
width: 100%;
}
.menu-toggle {
background-color: orange;
flex-shrink: 0;
height: 50px;
margin-left: 10px;
width: 50px;
}
<div class="header">
<div class="logo"></div>
<div class="menu-toggle"></div>
</div>
An easy way to do it is here.
.header{
margin:0px !important;
padding: 0px !important;
display: table;
width: 100%;
height: 1.5em;
overflow-y: hidden;
box-shadow: 0 1mm #aaa 5px;
vertical-align: middle !important;
position: relative;
}
#img-holder{
display: table-cell;
vertical-align: middle;
height : 100%;
background-color : blue;
max-width : 400px;
min-width : 250px;
padding: 0px !important;
}
#img {
display: table-cell;
max-width: 350px;
min-width: 150px;
height: 0.75em!important;
vertical-align: middle;
background-color: pink;
}
#menu-btn{
display: block;
margin: auto;
float: right;
height: 1.5em;
width: 1.5em;
background-color: orange;
border:none;
margin: 0px !important;
padding: none;
}
<div class="header">
<div id="img-holder"><span id="img"> Your Img</span></div>
<a id="menu-btn"></a>
</div>
I used line-height and vertical-align with calc.
html:
<div class="row">
<div class="menu-button"></div>
<div class="logo">
<img src="http://placehold.it/400x70">
</div>
</div>
css:
.menu-button {
background-color: #ffa200;
float: right;
height: 70px;
width: 70px;
}
img {
display: inline-block;
max-width: 100%;
vertical-align: middle;
}
.logo {
float: left;
height: 70px;
line-height: 70px;
max-width: calc(100% - 80px);
}
Demo: https://jsfiddle.net/sabeti05/1yg32uqo/
I am a stuck on trying to change the size and location on social media links on a test web page. No matter what size I change the height and width to in the CSS the image remains super large.
#footer {
height: 40px;
background-color: #69D2E7;
clear:both;
font-family:Open Sans;
}
#footer a {
display: inline-block;
margin-right: 5px;
}
#footer img a {
width: auto;
height: 10px;
max-height: 10px;
}
<div id=“footer”><img src="facebook.png"></div>
<div id=“footer”> <img src="pinterest.png"></div>
<div id=“footer”> <img src="instagram.png"></div>
<div id=“footer”><img src="linkedin.png"></div>
Its a matter of position, the img tag is actually inside a tag, so the one with
#footer img a{}
should be changed into
#footer a img {
width: auto;
height: 10px;
max-height: 10px;
}
Hi I have tested this code and its changing height and width of image. Please try this code: #footer a img { height: 30px; width: 35px; }
#footer a img {
width: auto;
height: 10px;
max-height: 10px;
}
To center the hyperlinks, try this:
#footer {
/* other styles */
text-align: center;
}
If that didn't work, try removing inline-block from a
#footer a {
display: inline-block; /* remove this line, if needed. */
}
I have two divs displayed using display: inline-block, in order to have them next to each other. This works when neither of the divs have text in them. However, when I put text in one div, it moves it down dramatically, while the other keeps the same position. This happens regardless of what div I put the text in; if I put it in both, however, only the left div will go down.
Here's a codepen to show what I mean: http://codepen.io/anon/pen/MwEKPp
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#main_container {
width: 1000px;
height: 95%;
margin: 0 auto;
font-size: 0px;
}
#logo {
display: inline-block;
height: 200px;
width: 200px;
background-color: aqua;
font-size: 20px;
}
#title_area {
display: inline-block;
font-size: 20px;
height: 200px;
width: 800px;
background-color: rgb(60,105,123);
font-family: "open sans";
font-size: 60px;
}
<div id="main_container">
<div id="logo_title_area">
<div id="logo">
test
</div>
<div id="title_area">
test
</div>
</div>
</div>
Entering text into the divs labelled logo and title_area will produce the effect I'm talking about.
Does anyone have any idea how to fix this? I need them to remain side-by-side regardless of their contents. Thanks in advance!
It's just missing the vertical alignment, the default value is baseline.
E {
display: inline-block;
vertical-align: top;
}
#logo, #title-area {
vertical-align: top;
}
I just added overflow:auto; for both of the divs and it worked
#logo {
overflow:auto;
display: inline-block;
height: 200px;
width: 200px;
background-color: aqua;
font-size: 20px;
}
#title_area {
overflow:auto;
display: inline-block;
font-size: 20px;
height: 200px;
width: 800px;
background-color: rgb(60,105,123);
font-family: "open sans";
font-size: 60px;
}
i should make something like:
But it actualy looks like:
As u can see on images "left" class is moving out of its possition with no reason when i add image or text there, and i am 100% sure that text or image is smaller then width / height of block so i really dont know how to continue and fix this.
My HTML:
<div id="sub-content">
<span class="left">
<img src="images/foto.png">
<span class="topic-name"> Název topicu nebo článku </span>
</span>
<span class="middle"></span>
<span class="right"></span>
</div>
My CSS:
#sub-content{
margin-left: 20px;
margin-top: 0px;
background-image: url("images/sub_content_bg.png");
background-repeat: repeat-x;
height: 145px;
width: 987px;
display:inline-block;
}
#sub-content .left{
width: 326px;
height: 145px;
display: inline-block;
}
#sub-content .left img{
width: 122px;
height: 121px;
display: inline-block;
margin-top: 0px;
margin-left: 5px;
}
#sub-content .left .topic-name{
width: 150px;
margin-bottom: 130px;
margin-left: 10px;
display: inline-block;
vertical-align: top;
text-decoration: underline;
font-weight: 14px;
}
#sub-content .middle{
background-color: orange;
width: 326px;
height: 145px;
display: inline-block;
}
#sub-content .right{
background-color: yellow;
width: 326px;
height: 145px;
display: inline-block;
}
Please can somebody help me to style this or tell me what i am doing wrong?
p.s. Live preview can be also find on: funedit.com/andurit/new/
If you add overflow:hidden to the .left div, it will align correctly.
See: JSFiddle
(I also replaced the inner span with div since div shouldn't occur inside span).
Try to add a position propery to your CSS file. In #sub-content, add position:static;. This should make the elements render in order as they appear in the document.