When clicking on the toggle the logo becomes small-CodePudding

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-close]="!openSidebar">
 <div >
   <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.

CodePudding user response：

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 >
  <img src="https://zupimages.net/up/22/42/fxvl.png">
</div>