Struggling to change the size of an image.
<div class="mypage">
<div class="mypage-block">
<div class="mypage-image">
<a href="/mylink">
<img alt="" src="mypic.jpg" style="width: 180px; height: 180px;"></a></div>
This is what I have tried
.page .page-block .page-image img {
width: 140px;
height: 140px;
}
When I inspect in Chrome it shows this img value as "element.style" set at 180px, this is the value I am having problems overriding.
Remove the inline styling...it will normally win as it comes after the CSS sheet as it will therefore have priority.
If absolutely necessary you can force the stylesheet to 'win' by adding !important statements but it's not recommended.
img {
width: 140px;
height: 140px;
}
<img src="http://lorempixel.com/output/city-q-c-180-180-5.jpg" style="width: 180px; height: 180px;" alt="">
<img src="http://lorempixel.com/output/city-q-c-180-180-5.jpg" alt="">
The inline style on the img element is overriding your CSS styling.
In order to undo this (assuming you have no ability to remove the inline style from the img element itself) you need to add an !important deceleration to your CSS attributes.
Your classes in your CSS file also do not match up those declared in your HTML
.mypage .mypage-block .mypage-image img {
width: 140px !important;
height: 140px !important;
}
Related
This is code for the div
width: 110px;
height: 10px;
background: #ffff;
border-radius: 30px;
margin-top: -10px;
and this is how it displays it
But if display is set as list-item it shows up,any other display won't work
I'm not sure what i messed up,and why height shows 0
height only works on block box, and display: list-item uses block box by default. I guess your original css may contain inline-type display and cause height not working. Here is an example to show the results in different cases:
.bar {
width: 110px;
height: 10px;
background: #ffff;
border-radius: 30px;
margin-top: -10px;
}
.display-block {
display: block;
}
.display-inline {
display: inline;
}
.display-list-item {
display: list-item;
}
<body style="background: #999;padding: 10px">
<div>Div (default display is "block")</div>
<div class="bar"></div>
<div>Span (default display is "inline")</div>
<span class="bar"></span>
<div>With "inline" display</div>
<div class="bar display-inline"></div>
<div>With "block" display</div>
<div class="bar display-block"></div>
<div>With "list-item" display</div>
<div class="bar display-list-item"></div>
</body>
Ref: MDN - Introduction to the CSS basic box model - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content_area
Another possible case is that there are other display, height or max-height settings in the current css hierarchy and override the original ones. You may check the css applied to the target div is what you want.
I have a gallery container which has two columns. I append multiple photos to the container using jQuery. When I attempt to use nth-child(n) on the div container or img tags, nothing happens. I'm not too sure what I'm doing wrong.
I've tried to use nth-of-type too, selecting image tags, div tags, adding classes and IDs trying to get it to access the elements, but I've failed each time.
HTML:
<body>
<div class="photos"></div>
</body>
Javascript:
$( ".photos" ).append(`<img class=\"diaryImage\" src=\"..url\">`);
CSS:
.photos {
line-height: 0;
-webkit-column-count: 2;
-webkit-column-gap: 0px;
-moz-column-count: 2;
-moz-column-gap: 0px;
column-count: 2;
column-gap: 0px;
margin-top:.5%;
background-color: transparent;
width: 80%;
margin-left: 16%;
height: auto;
overflow: auto;
}
.photos img {
width: 100% !important;
height: auto !important;
vertical-align: top;
}
.photos img:nth-child(even) {
width: 10%;
/* grid-column:2;*/
}
I have also tried:
div.photos img:nth-child(even) {
width: 10%;
/* grid-column:2;*/
}
.photos:nth-child(even) {
width: 10%;
/* grid-column:2;*/
}
And a couple of other tags. I'm new to using nth child selectors so not 100% sure what I'm doing wrong.
I just want any impact to be had on every second photo. Once I can see the selector working, I can continue working on the problem. My ultimate objective is to have every second photo placed into column 2, but just testing with width:10%; to see if the code is having any impact.
I can't see a problem with :nth-child(even), see below, it works as expected, Your issue is coming from the use of !important as stated in the other answer from #Trevin Avery.
Futhermore why are you escaping this:
.append(`<img class=\"diaryImage\" src=\"..url\">`);
This
.append(`<img class="diaryImage" src="${dynamic_url}" />`);
should work with issues, no?
.photos img:nth-child(even) {
outline: 1px solid red;
}
<body>
<div class="photos">
<img src="https://via.placeholder.com/300x200?text=1" alt="" />
<img src="https://via.placeholder.com/300x200?text=2" alt="" />
<img src="https://via.placeholder.com/300x200?text=3" alt="" />
<img src="https://via.placeholder.com/300x200?text=4" alt="" />
<img src="https://via.placeholder.com/300x200?text=5" alt="" />
<img src="https://via.placeholder.com/300x200?text=6" alt="" />
<img src="https://via.placeholder.com/300x200?text=7" alt="" />
<img src="https://via.placeholder.com/300x200?text=8" alt="" />
</div>
</body>
The problem is that you have !important in .photos img. Remove that and it will work as expected.
!important will override all other styles that are trying to set that attribute, even if they are more specific, unless they also have an !important. This is preventing the new style in .photos img:nth-child(even) from being applied.
Here's the docs and here's a helpful tutorial.
I have a image gallery with a 2 column layout. The image gallery can contain 1 column full width images between the 2 column images.
See my Codepen Example:
<div class="gallery">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
<img class="large" src="http://nosrc.io/400x200">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
<img class="large" src="http://nosrc.io/400x200">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
</div>
http://codepen.io/anon/pen/JdgBOb
Why does :nth-child select the wrong gallery items after the second full width image? Normally all left column images should have margin-left: 0; and all right column images should have margin-left: 2%;.
P.S. I can not use JavaScript.
To really get this working properly (assuming your image sizes may be dynamic) you'll need to use .large:nth-of-type(...) ~ img and it will get pretty complicated (not to mention it may not work on some older browsers). An easier solution would just be to use 1% margin on all images: http://codepen.io/Godwin/pen/MwNBMK.
check it out. That says:
.gallery img:nth-child(2n+1) {
margin-left: 0;
}
and:
.gallery img.large ~ img:nth-child(2n+1) {
margin-left: 2%;
}
the (2n+1) changes in what position uses the attribute
Wouldn't this suffice? I know but that theres unnecessary right margin in each line of images, but..
http://codepen.io/anon/pen/qdeyzP
I also took the liberty of refactoring that weird float clearing.
.gallery {
width: 400px;
overflow: hidden;
}
Insetad of the bloaty:
.gallery::before,
.gallery::after {
content: " ";
display: table;
}
.gallery::after {
clear: both;
}
`
Since overflow: hidden is a pretty good clearfix on its own.
I don't think nth-child is doing what you think it's doing. It's not the nth-child relative to the .large element; it's relative to all the img children of .gallery. If you use the style inspector and examine the styles being applied to each img, you should be able to see what I mean.
You could try a rule like this:
.gallery img {
float: left;
width: 48%;
margin-right: 2%;
margin-bottom: 2%;
}
.gallery img.large {
width: 98%;
}
See http://codepen.io/anon/pen/NqQLYx.
I am trying to align these four separate spliced images from an original image. I am doing this because each portion of the image has a separate link.
I have the images align. Now all I want to do is shrink the size of the images via width: #%;
For some reason this just isn't seeming to work.
Any help would be appreciated.
Here is a link to the CodePen: http://codepen.io/anon/pen/pvGgdp
.split,
.split2,
.split3,
.split4 {
display: inline-block;
margin: -2px;
}
.spliter {
margin-top: -3px;
}
<div class="splitWrapper">
<div class="split">
<a href="#">
<img src="http://i.imgur.com/Jnah8Y0.png" title="source: imgur.com" />
</a>
</div>
<div class="split2">
<a href="#">
<img src="http://i.imgur.com/mGftOCN.png" title="source: imgur.com" />
</a>
</div>
<div class="spliter"></div>
<div class="split3">
<a href="#">
<img src="http://i.imgur.com/ZooSwpU.png" title="source: imgur.com" />
</a>
</div>
<div class="split4">
<a href="#">
<img src="http://i.imgur.com/sMsHX14.png" title="source: imgur.com" />
</a>
</div>
</div>
You could use background images and assign them to the a tags. I have amended your codePen here > http://codepen.io/anon/pen/YPBwJX
However, it may be better to just use one image, and overlay transparent a-tags, set them to display block and then you don't have to worry about the image lining up! Anyways, please see the code below for the question asked =)
.splitWrapper {
width: 850px;
margin: auto;
}
a.split1 {
background: url('http://i.imgur.com/Jnah8Y0.png');
}
a.split2 {
background: url('http://i.imgur.com/mGftOCN.png');
}
a.split3 {
background: url('http://i.imgur.com/ZooSwpU.png');
}
a.split4 {
background: url('http://i.imgur.com/sMsHX14.png');
}
a.split{
width: 417px;
height: 300px;
float: left;
margin: 0;
padding: 0;
display: block;
background-size: 417px 300px;
}
.clear { clear: both; }
<div class="splitWrapper">
<div class="clear"></div>
</div>
I don't think you quite understand how % works in CSS. % means that percentage of the parent element. Also, for it to work, the parent element has to have a defined width. Here's the CSS changes you need:
.splitWrapper {
width: 100%;
}
.split, .split2, .split3, .split4 {
display: inline-block;
margin: -2px;
width: 25%;
}
.split img,
.split2 img,
.split3 img,
.split4 img {
max-width: 100%;
}
.spliter {
margin-top: -3px;
}
http://codepen.io/anon/pen/KwJVGQ
You'll need to adjust your margins accordingly. You should use percentage margins since you're working with percents. Just divide the width of the margin by the width of the element and multiply it by 100 to get your margin percentage.
I'm trying to create a new img class so I can add properties to it without affecting the original img class.
example:
<img class="Test" src="www.google.com"/>
Can anyone advise how I can do this in CSS
You can have multiple classes on an HTML element, seperated by a space. It than gets styles from both.
So in HTML:
<img class="old" src="image.jpg">
<img class="old new" src="image.jpg">
And CSS:
.old { width: 100px; }
.new { height: 50px; }
While the first image only has a width assigned, the second also has a height definition.
The class attribute allows for a space-delimited list of classes that are applied to the element.
For example, the following will result in an image that is 40px wide by 20px high:
HTML
<img class="Test another-class" src="www.google.com"/>
CSS
.Test {
width: 40px;
}
.another-class {
height: 20px;
}