[mimoon]

우선 변경을 위한 전체 코드

/* mobile sticky menu*/
@media only screen and (max-width: 480px) {
    .navigation-top {
        position: fixed;
        top: 0;
        bottom: auto;
        right: 0;
        left: 0;
        width: 100%;
        z-index: 7;
    }
}

/* hambuger menu right*/
.js .menu-toggle {
     float: right;
}

/* Twenty seventeen header height size on mobile  */
@media only screen and (max-width: 400px) {
	
.has-header-image, .custom-header-media, custom-header{
	//width:100%;
	height: 4em;
left: 0;
//max-width: 100%;
//min-height: 0;
//-o-object-fit: unset;
//object-fit: unset;
position: static;
//overflow: hidden;
	object-fit: cover;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;
}
}

/* Twenty seventeen call Hambuger and sub-menu size and deco  */
@media only screen and (max-width: 768px) {
		ul.sub-menu.toggled-on{
		background-color: #f4d8a8;
		margin-left:40px;
		padding-left: 0px;
}
	
 /* togle menu hover bgm color modify*/
	ul.sub-menu.toggled-on a:hover{
  background-color: #767676;
		color:#ffffff;
}
	/* togle menu selection current item bgm color modify*/
	ul.sub-menu.toggled-on .current-menu-item>  a{
background-color: #767676;
		color:#ffffff;
}
	.main-navigation ul ul a {
		padding-left: 20px;
	}
}

상기 코드에서 position: static와 height: 4em 때문에 이미지 width가 늘어나는 현상 해소.
height가 height: em 아닌 px(150px였음)일 경우 절대값으로 반영되어 이미지 width 통제 안 되었던 것.
height: 150px가 아닌 height: 4em으로 변경하고
//overflow: hidden;
object-fit: cover;
─으로 변경 조절함으로써 해소.

[글쓴이]

글