CSS - 包装宽度与图像大小匹配

Question

我有一个图像占位符，可动态获取不同宽度的图像。我应该相对于图像放置导航元素。由于我事先并不知道图像的宽度，因此我不知道如何设置元素以使它们始终位于相对于图像的相同位置。

这是我的HTML：

＆＃13;

＆＃13;

    .magazine-hero {
        position: relative;
    
        .magazine-preview-nav {
          background-color: #FFF;
          width: 57px;
          height: 35%;
          position: absolute;
          top: 10%;
          right: 10px;
          text-align: right;
    
          .right-arrow, .left-arrow {
            position: relative;
            height: 50%;
          }
    
          img {
            width: 35px;
            position: relative;
            top: 33%;
          }
        }
      }

＆＃13;

<div class="small-12 medium-6 columns">
          <div class="magazine-hero">
            <img id="image" src="/imagecache/cover/{{ $issues->first()->first()->image }}" alt="" />
    
            <div class="magazine-preview-nav">
                <div class="right-arrow" id="forward">
                  <img src="{{ asset('/img/right-arrow-black.svg') }}" />
                </div>
                <div class="left-arrow" id="back">
                  <img src="{{ asset('/img/left-arrow-black.svg') }}" />
                </div>
            </div>
          </div>
        </div>

＆＃13;

＆＃13;

＆＃13;