Here is how my header is represented
If I click on the cross
The image quality of the logo is really very low
I would just like to know if it is possible to increase the size of the logo and delete the title of the logo.
Is it possible to do this?
dashboard.component.html
<div class="sidebar" [class.sidebar-close]="!openSidebar">
<div class="logo-details">
<img src="https://zupimages.net/up/22/42/fxvl.png" />
</div>
...
styles.css
/* Sidebar */
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 260px;
background: white;
z-index: 100;
transition: all 0.5s ease;
}
.sidebar.sidebar-close {
width: 60px;
}
.sidebar .logo-details {
width: 100%;
padding: 10px 10px 10px 10px;
}
.sidebar .logo-details img {
height: 50px;
width: 80%;
display: block;
margin: 0 auto;
}
...
I can send you an illustration via Stackblitz here
Thank you very much for your help.
Here's roughly what you need to do. The image must have a wrapper, the property of which is not to show cropped parts of the image. You can position the image itself inside the wrapper in any way convenient for you.
.wrapper {
overflow: hidden;
box-shadow: 0 0 40px black;
width: 180px;
height: 120px;
}
.wrapper img {
transform: scale(1.2) translateX(-65px);
}
<div class="wrapper">
<img src="https://zupimages.net/up/22/42/fxvl.png">
</div>
Related
I want the phones in this image to ignore the overflow rule set in the #section-2 and display as shown in the phone image, any tips would be very helpful.
I set the overflow to hide the outer parts of the circle pattern but it also applies to the phone image.
Ive tried adding an overflow class around the .circle class to target the circleimage but this doesn't work.
br
// Section-2
#section-2 {
background: blue;
color: white;
height: 50vh;
border-radius: 0 10rem 0 10rem;
position: relative;
opacity: 0.9;
overflow: hidden;
// Circle image pattern
.box {
display: flex;
margin: 0 10rem;
overflow: visible;
.circle {
background: url(/images/bg-pattern-circles.svg);
background-size: contain;
background-repeat: no-repeat;
width: 90rem;
height: 90rem;
position: absolute;
top: -40rem;
left: -18.5rem;
z-index: -1;
}
// Phone image container
.phone {
z-index: -1;
position: absolute;
top: -5rem;
img {
// position: absolute;
}
}
<section id="section-2">
<!-- Box containng phone image and text -->
<div class="box">
<!-- circular pattern -->
<div class="circle"></div>
<div class="phone">
<img src="images/illustration-phones.svg" alt="Phones" />
</div>
</div>
</section>
My current solution
The overflow rule is removed from the section and the background colorT he two images are removed from the main code and put behind the section using pseudo before and after elements.
That way the phones can protrude outside the section itself.
Positioning has been moved from rems to % so as to make the whole a bit more responsive - though given the aspect ratio of the phone image there needs to be some thought as to what is the intended layout on portrait devices but that is out of the scope of this question.
/* Section-2 */
#section-2 {
color: white;
height: 50vh;
border-radius: 0 10rem 0 10rem;
position: relative;
width: 100%;
top: 10vh;
/* just so we can see the phone at the top */
}
/* Backgrounds */
#section-2::before,
#section-2::after {
content: '';
display: inline-block;
width: 100%;
position: absolute;
left: 0;
z-index: -1;
background-repeat: no-repeat;
}
#section-2::before {
/* opacity: 0.9; Is this required? If so, on which of the parts of the background? */
height: 100%;
top: 0;
border-radius: 0 10rem 0 10rem;
background-color: #393b59;
background-image: url(https://i.stack.imgur.com/catHQ.png);
background-size: 70% auto;
background-position: -50% 80%;
}
#section-2::after {
height: 150%;
top: -20%;
background-image: url(https://i.stack.imgur.com/7xw7Y.png);
background-size: auto 100%;
background-position: 20% 0;
}
<section id="section-2">
</section>
I know there are a LOT of examples of this, and I have tried all of them to no avail. I am trying to create a carousel component that resizes images according to its boundary. I am using it in a myriad of places, in a myriad of different ways, so it MUST be responsive. I also need the images to be clickable as normal images for a11y and customers (managing expectations).
Here is my fiddle so far: https://codepen.io/skamansam/pen/NWvroeY?editors=1100
I can get all of the elements to resize accordingly (using max-width/height). when I use an image that is wider than taller, all works well. When I use an image that is taller than wider and exceeds the height of the box, the image overflows instead of respecting the max-width/height properties.
The most common answer involves wrapping the image in an html element and setting the width/height there, which I have done, but it doesn't solve the problem. Another common answer involves using combinations of position values, which didn't give any better results than I already have. Using the inspector, you can clearly see that all the elements EXCEPT the image are correctly sized, and the image overflows the container.
Is there any other way to get the img tag to respect height: 100% in the same way it respects width: 100%?
you are using image with a very high resolution (500x800) , you have use little lower resolution otherwise you have to use overflow:hidden; on your wrapping div.Using max-width:100%; the image is already resizing itself but cannot resize further more, inspect the element to get a better understanding.
I made three changes:
Your slide needs width: auto; and height: 100%;
Your image needs width: 100%; and height: 100%;
Your image needs object-fit: contain; (not cover)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.jumbotron {
display: block;
width: 100%;
margin: 0;
padding: 0;
background-color: #aaa;
/* overflow: hidden; */
height: 150px;
}
.jumbotron .container {
width: 100%;
height: 100%;
}
.my-carousel {
background-color: #77f;
max-height: 100%;
max-width: 100%;
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
// overflow: hidden;
}
.my-carousel .previous-btn, .my-carousel .next-btn {
font-size: 200%;
padding: 0px 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
.my-carousel .content {
max-height: 100%;
max-width: 100%;
align-self: center;
flex-grow: 1;
position: relative;
width: 100%;
height: 100%;
}
.my-carousel .content .slide {
height: 100%;
//max-width: 100%;
display: none;
position: relative;
// width: 100%;
vertical-align: middle;
padding: 0px;
margin: 0px;
overflow: visible;
}
.my-carousel .content .slide.active {
display: block;
}
.my-carousel .content .slide img {
//position: relative;
// margin: 0px auto;
// box-sizing: border-box;
// vertical-align: middle;
height: 100%;
width: 100%;
// max-width: 100%;
// max-height: 100%;
object-fit: contain;
object-position: center;
overflow: hidden;
}
.my-carousel .content .slide .caption {
position: absolute;
background-color: rgba(0,0,0,.4);
text-shadow: 2px 2px 4px #fff, -2px -2px 4px #fff;
stroke: 2px #fff;
padding: 10px;
bottom: 0px;
width: 100%;
font-size: 150%;
// color: #000;
// -webkit-text-stroke-width: 1px;
// -webkit-text-stroke-color: #fff;
}
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.3.95/css/materialdesignicons.min.css" rel="stylesheet"/>
<main role="main">
<section class="jumbotron text-center">
<div class="container">
<div class="my-carousel">
<div class="previous-btn">
<span class="mdi mdi-transfer-left"></span>
</div>
<div class="content">
<div class="slide active">
<img src="https://picsum.photos/500/800?random=1" />
<div class="caption">This is only a WIP to figure out how to style this carousel properly.</div>
</div>
<div class="slide">
<img src="https://picsum.photos/1000/400?random=1" />
</div>
</div>
<div class="next-btn">
<span class="mdi mdi-transfer-right" />
</div>
</div>
</div>
</section>
</main>
luckily, the answer is inside "picksum" itself, it allows you to choose the resolution of the image you want, you chose (500x800) that is way too large, you can use the following reduced resolutions >(50x80), (100x160), (180x288), (190x304), (200x320). I am sure you will get your desired result by using (180x288) or (190x304)
for example:<img src="https://picsum.photos/190/304?random=1" />
Use max-width and max-height
Like this
.slide {
width: 100px;
height: 100px;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.slide .img {
max-width: 100%;
max-height: 100%;
}
I have a page that will display an image (just a green div placeholder for now). I want to slide a div in from the right which will be a comments box and keep the image centred in the remaining space. If the image is too large for this remaining space I want to allow the user to scroll over the image horizontally.
I have this:
var showingComments = false;
$("#clickme").click(function() {
if (showingComments == false) {
showingComments = true;
$(this).parent().animate({
right: '0px'
}, {
queue: false,
duration: 500
});
} else {
showingComments = false;
$(this).parent().animate({
right: '-150px'
}, {
queue: false,
duration: 500
});
}
});
#Picture_container {
width: auto;
background-color: yellow;
overflow-x: auto;
}
#thePicture {
height: 300px;
width: 400px;
/* this will change when the page loads */
background-color: green;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
}
#commentsBox {
background: #00FFFF;
position: absolute;
width: 150px;
height: 400px;
right: -150px;
top: 10px;
}
#clickme {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 400px;
background: #5F9EA0;
text-align: center;
transform: rotate(90deg);
transform-origin: left top 0;
}
#comments {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='Picture_container'>
picture container
<div id='thePicture'>
the picture goes here
</div>
</div>
<div id="commentsBox">
<div id="comments">
I am a sticky-out comments box
</div>
<div id="clickme">
click me!
</div>
</div>
Example: https://jsfiddle.net/fwwfe2q6/
As you can see the comments box pops out but it overlaps the image holder div instead of making it move left. Can you suggest how to centre the green div (representing the image) in both the expanded and collapsed state of the comments box, and have the green div horizontally scrollable when it is too large to fit the window along with the expanded comments box?
You may use flex and rethink structure:
body {margin:0;}
#Picture_container {
display: flex;
flex-wrap: wrap;
height: 100vh;
max-width: 700px;
transition: 0.5s;
margin: auto;
background: yellow;
text-align: center;
}
#thePicture {
display: flex;
flex-wrap: wrap;
flex: 1;
overflow: auto;
}
#thePicture img {
flex-shrink: 0;
margin: auto;
max-height: 75vh;
}
p, [for="mw100"] {
width: 100%;
}
p {
background: turquoise;
padding: 1em;
margin: 0;
}
#commentsBox {
display: flex;
background: tomato;
overflow: hidden;
}
#test,
#full,
#mw100 {
position: absolute;
right: 100%;
}
#commentsBox label {
display: block;
background: tomato;
width: 2em;
margin: 1em 0 0 0em;
white-space: nowrap;
transform: rotate(90deg);
cursor: pointer;
}
#commentsBox label:before {
content: '';
position: absolute;
width: 2em;
height: 100vh;
display: block;
}
#clickme {
background: purple;
width: 200px;
margin-right: -200px;
transition: 0.1s;
}
label {
font-size: 1.2em;
font-weight: bold;
color: white;
text-shadow: 0 0 2px black;
}
#test:checked~#clickme {
margin-right: 0;
}
#full:checked~#Picture_container {
max-width: 100%;
}
#mw100:checked~img {
max-width: 95%;
}
<input type="checkbox" id="full" />
<div id='Picture_container'>
<p>picture container <label for="full">Toggle me full or 700px width</label></p>
<div id='thePicture'>
<input id="mw100" type="checkbox" /><label for="mw100">toggle image overflow</label>
<img src="http://dummyimage.com/1800x1000/00ff00&text=the picture goes here" />
</div>
<div id="commentsBox">
<input type="checkbox" id="test" />
<div id="comments">
<label for="test">To show comments- click me!</label>
</div>
<div id="clickme">
Shown comments here.
</div>
</div>
Snippet propose a few option depending on expected result.
full width or max-width on container
container holding image overflowing or image with max-width
labels and imputs only for demo, use js for the slidding box .
a tutorial/reminder about flex i find usefull : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have trouble coding a 1px horizontal seperator line with a logo displayed in the center as pure CSS. Should look like this:
Divider with logo centered
There is a problem with multiple instances: When I add more dividers on a single page only one or two will be displayed with a line, the others will just display the logo.
A question about a centered logo was answered here - but none adressed the bug that happens with multiple instances: Divider with centred image in CSS?
Here is a adapted solution out of that discussion, fiddle below.
CSS:
body {
margin: 0;
background: white;
}
header:after {
content: '';
display: block;
width: 100%;
height: 1px;
background: #ccc;
margin-top: -90px; /* Negative margin up by half height of logo + half total top and bottom padding around logo */
}
.logo {
position: relative; /* Brings the div above the header:after element */
width: 200px;
height: 100px;
padding: 40px;
margin: 0 auto;
background: white url("http://placehold.it/200x100") no-repeat center center;
}
.logo img {
display: block;
}
HTML:
<body>
<header>
<div class="logo">
</div>
<div class="logo">
</div>
<div class="logo">
</div>
</header>
</body>
The fiddle:
http://jsbin.com/delixecobi/edit?html,css,output
I totally changed the CSS. Give the .logo a position: relative and :after a position: absolute. You are using it for one single header. That's why it didn't work.
body {
margin: 0;
background: white;
}
.logo:after {
content: ' ';
display: block;
width: 100%;
height: 1px;
background: #ccc;
position: absolute;
top: 50%;
margin-top: -1px;
left: -50%;
width: 200%;
}
.logo {
position: relative; /* Brings the div above the header:after element */
width: 200px;
height: 100px;
padding: 40px;
margin: 0 auto;
background: white url("http://placehold.it/200x100") no-repeat center center;
}
.logo img {
display: block;
}
<header>
<div class="logo">
</div>
<div class="logo">
</div>
<div class="logo">
</div>
</header>
Preview
If you want the line not to cross or cut, use a negative z-index.
I found a solution also for my question how to get text centered within the div - thanks to web-tiki for his approach here: Line before and after title over image
In the JSBin I put all together and formatted / commented it a bit to make it easy to work with. You will find:
divider formats with img, text and text in multiple lines
stable in multiple instances
body {
margin: 0;
background: white;
}
.logo:after {
content: ' ';
display: block;
width: 100%;
height: 1px;
background: #ccc;
position: absolute;
top: 50%;
margin-top: -1px;
left: -50%;
width: 200%;
z-index: -1;
}
.logo {
position: relative;
/* Brings the div above the header:after element */
width: 200px;
height: 100px;
padding: 20px;
/* also padding between line and logo */
margin: 0 auto;
background: white url("http://placehold.it/200x100") no-repeat center center;
}
.logo img {
display: block;
}
.logotext {
width: 100%;
margin: 20 auto;
overflow: hidden;
text-align: center;
font-weight: 300;
color: green;
/* color text */
}
.logotext:before,
.logotext:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 20 0 -55%;
/* 2nd no: space text to line on the left */
vertical-align: middle;
border-bottom: 1px solid #ccc;
/* last: color line */
}
.logotext:after {
margin: 0 -55% 0 20;
/* last no: space text to line on the right */
}
span {
display: inline-block;
vertical-align: middle;
}
<header>
<div class="logo">
</div>
<div class="logo">
</div>
<div class="logotext">
somesome</div>
<div class="logotext">
somesome</div>
</header>
One major drawback to this solution is that it does not allow the width of the line to be defined to % of the main viewport.
I would like to position caption below my picture (but still on it) and its with to be the same width of the picture (the with of the pictures can change).
Here is what I have done but after hours of research I've been unable to figure out how to do extend the width of the caption to the same width of the picture. Can somebody give me a hint? Thank you
figure{
position: relative;
}
figure img{
z-index: 1;
}
figure .caption{
display: block;
width: 100%;
position: absolute;
bottom: 2px;
color: #fff;
background: rgba(0,0,0,0.7);
padding: 8px 8px 8px 8px;
}
<div class="img">
<figure>
<img src="http://1.bp.blogspot.com/_xNTvSztbjn0/S9rYIIoIdkI/AAAAAAAAFHk/RCYU5iILKTc/s1600/0l+P1010254.jpg"/>
<figcaption>
<span class="caption">A short description</span>
</figcaption>
</figure>
</div>
Here is the fiddle http://jsfiddle.net/7hKKV/
Slightly adjusted your code:
figure {
position: relative;
width: 100%;
}
figure img{
z-index: 1;
width: 100%;
}
figcaption {
display: block;
width: 100%;
position: absolute;
bottom: 2px;
color: #fff;
background: rgba(0,0,0,0.7);
}
figcaption .caption {
display: inline-block;
padding: 8px;
}
Set 100% width on the parent, Moved your styles for the caption on to the parent figcaption,moved the padding of the caption to the span, made your image 100% width to fill the container
http://jsfiddle.net/LF33A/1/
you are really close. You need to add some width: 100% styling in order to achieve this
figure{
position: relative;
width: 100%; /*Allows .caption to extend across image without going over*/
}
figure img{
z-index: 1;
width: 100%; /*Image will be size to 100% if div.img*/
height: auto; /*Prevents Skewing of image*/
}
updated fiddle http://jsfiddle.net/7hKKV/12/